grid-template-columns の基本｜カードが自動で整列するレスポンシブレイアウト

ニャンコ

画面のサイズに応じてカードの枚数を変更したいよ～

そういう時はgridレイアウトを使用すればいいよ

ワンコ

CSS Grid で「カードをきれいに並べたい」「列数を自動で変えたい」
そんなときに使うのが grid-template-columns と repeat() です。

まず結論：grid-template-columnsはこれだけ覚えればOK

grid-template-columns（ grid template columns） は、CSS Gridで「列の作り方」を決めるプロパティです。
カードをレスポンシブに“いい感じ”で並べたいなら、まずはこの1行が定番。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

• 250px：カードが潰れない最小幅（値はデザインによって自由に変更してね！）
• 1fr：余った幅を伸ばして埋める
• auto-fit：入るだけ列を作って、余計な列は畳む
• repeat()：同じ指定を繰り返して楽する

grid-template-columnsで指定できる値

書ける値はいろいろありますが、実務でよく使うのは主にこのあたり。

固定幅：px

固定幅の列を並べる（余りは空きスペースになります。）

grid-template-columns: 200px 200px 200px;

割合：%

親要素の幅に対する割合で列幅が決まります。

grid-template-columns: 30% 70%;

比率：fr（CSS Gridの主役）

幅を比率で分配します。

grid-template-columns: 2fr 1fr;

auto（中身に合わせる）

中身の長さに合わせて、残りをfrで埋めるやり方。

grid-template-columns: auto 1fr;

minmax（最小〜最大で潰れ防止）

「最低200pxの箱を用意して、余った分は伸ばして使う」指定です。

grid-template-columns: minmax(200px, 1fr) 320px;

レスポンシブ可変グリッドの作り方（repeat × minmax）

カードなどのレイアウトを横並びにする場合「display：flex」を使用する場合が多いと思います。
たしかに、要素を横並びにするならflexが手っ取り早いです。

ですが、「flexでも横並びはできるけど、画面幅が狭くなるとカードが潰れて崩れがち」な場面で、Gridが強いです。

「flex」と「grid」それぞれで並べたサンプルを用意しました。
検証ツールなどで画面幅を狭めて動きをご確認ください。
https://sample.web-create-kokusyo.com/sample02/

画面幅を狭めると、「flex」の場合はどんどん潰れてしまいますが、「grid」の方は、画面幅に応じて表示するカードの枚数が自動的に切り替わっています。

さっそくサンプルのソースをご覧ください。
今回はgridレイアウトについての解説なので、grid関連のプロパティ以外は省略しています。

/* gridのスタイル */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px 2%;
}

ポイントはこちらの部分となります。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

repeat()関数

「repeat()」関数はcssのGridレイアウトにおいて値の繰り返しを表します。

repeat(繰り返しの回数, 繰り返す値)

auto-fit

repeat関数の繰り返しの回数部分に「auto-fit」と入っています。
回数を入れるんじゃないのかよ！！　と思われたかもしれませんが、これは簡単にいうと横幅に入るだけ配置するという意味になります。

ニャンコ

微妙な隙間が埋まれた場合は、自動で幅を広げて親要素ピッタリにしてくれるよ

よく似たもので、「auto-fill」があります。

• auto-fit：空きトラックを畳む（詰まる）
• auto-fill：空きトラックを残す（枠が残る）

minmax(250px, 1fr)

minmax関数は値の最小値と最大値を設定します。
「最小幅＝デザインが崩れないギリギリ」を決めるのがコツです。

• 最小 250px（カードが潰れない下限＝ストッパー）
• 最大 1fr（余った幅を伸びて埋める＝伸びしろ）

minmax(最小値, 最大値);

fr単位はGridから新しく追加された単位で、「fr」はfractionの略で比率という意味になります。
親要素から見た子要素の比率を指定できます。

結論

一つ一つの意味が分かった後、改めてcssを見てみると、　

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

列の数： 繰り返し（親要素に入るだけ , 最小値:250px , 最大値:1fr ）

という感じでしょうか？
ただ、毎回毎回同じように書くことはなく大体コピペで済ませているので、こういうものであるとなんとなく分かってるだけでも良いと思います。（個人的感想）