カードの列数を自動で変えたい：Gridのauto-fitとminmaxを作例で確かめよう

カードを横へ並べたいけれど、画面ごとに二列・三列の条件をたくさん書くのは大変。CSS Gridで、入る列数とカードの最小幅を組み合わせる方法を試してみよう。

この記事は、同じ大きさのカードを持つ一覧が対象。ブラウザだけで動く作例を用意した。実サイトを編集せず、幅とカードの数を変えて確かめられるよ。

列の最小値と、余った幅を決める

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

repeatは列の定義を繰り返す関数。auto-fitで入る本数を自動的に決め、minmaxで最小120px・最大1frの範囲を指定する。frは余った空間を分け合う単位で、各列が同じ条件なら幅を均等に分けられる。

この例の120pxは小さな作例用。実際の記事カードなら、題名や画像を読める最小幅から考えよう。列数を増やすことだけが目的ではないよ。

幅を変えると、列数はどうなる？

作例では、グリッド自身の幅を240px・360pxへ切り替えられる。横の余白や枠をグリッドの外に置き、12pxのgapで比べる。狭い画面では画面内へ収まる幅まで縮めるので、表示される実測幅も確認しよう。

編集部では、実際のカードの座標と幅をブラウザで測って確認した。画面の幅だけでなく、親要素の内側で使える幅が列数へ関係する点を見よう。

auto-fillとは、空の列の扱いが違う

auto-fillは入る本数のトラックを作り、auto-fitは配置後に空の繰り返しトラックを折りたたむ。カードが一つしかないとき、余った場所をそのカードが広く使うかを比べると分かりやすい。

作例を360px・カード一枚へ切り替え、auto-fitとauto-fillを選んでみよう。前者では一枚が使える幅へ広がり、後者では空の列の場所が残る。カードを増やし、空の列がなくなるときも比べてね。

最小幅より狭いときは、自動で縮む？

120pxという最小値は、そのままでは親が100pxになったからといって100pxへ変わるわけではない。狭い場所でも収めたい場合は、目的に応じて次の形を検討できる。

grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));

これは最小値を親の幅と120pxの小さいほうにする考え方。文字の折り返し、画像、カード内の最小幅も別に確認する。列の定義だけで、どんな内容もはみ出さないと保証するものではないよ。

確認してからサイトへ移す

1. 長い題名、短い題名、画像なしのカードを用意する。
2. 親要素の内側の幅と、gapを確かめる。
3. カードが一つのときと、複数のときを比べる。
4. 文字を拡大し、内容が欠けないかを見る。
5. 作例はリセットで240px・四枚・auto-fitへ戻す。

間隔の考え方はgapとmargin、長い文字への対応はFlexとmin-widthへ。

参照した公式資料

• MDN：repeat()
• MDN：minmax()

確認日：2026年10月26日。