Flexboxで横並びはできるようになった。次に困るのが「カードを3列で並べたい」です。ここからはGridの出番です。

FlexboxとGridの違い

  • Flexbox … 一方向に並べる。中身の大きさに応じて自然に並ぶ
  • Grid … 縦横の区画を先に決めて、そこに流し込む

カード一覧のように「3列できっちり揃えたい」ものはGridが得意です。ナビゲーションのように「横一列に並べたい」だけならFlexboxで十分です。

3列に並べる最小の書き方

style.css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
  • display: grid … この箱をGridにする
  • grid-template-columns … 列の作り方。repeat(3, 1fr) は「1fr の列を3つ」
  • gap … 区画のすき間

fr は Grid 専用の単位で「余った幅を分け合う割合」です。1fr を3つ並べれば3等分になります。2fr 1fr と書けば2対1の幅になります。

CODE3列のカード一覧コードを書き換えると、すぐ下で動きます

repeat(3, 1fr) の 3 を 2 や 4 に変えてみてください。列数が変わります。gap の数字も試してみてください。

画面幅に応じて自動で列数を変える

Gridの真価はここです。メディアクエリを書かなくても、幅に応じて列数を変えられます。

覚えておくと一生使える1行
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

意味は「最低200px、余裕があれば広げる列を、入るだけ並べる」です。画面が広ければ4列、狭ければ2列、もっと狭ければ1列に、自動で切り替わります。

CODE自動で列数が変わるグリッドコードを書き換えると、すぐ下で動きます

仕切りをドラッグしてプレビューの幅を変えてみてください。列数が勝手に変わります。minmax の 200px を変えると切り替わる幅も変わります。

1つの区画を大きくする

特定のカードだけ2列ぶん使いたいときは、grid-column に span を書きます。1行で済みます。

CODE最初のカードだけ2列ぶんコードを書き換えると、すぐ下で動きます

span 2 の数字を 3 にすると、3列ぶんに広がります。1にすると通常に戻ります。

どちらを使うか迷ったら

「列を揃えたい」ならGrid、「並べたいだけ」ならFlexbox。この基準でほぼ判断できます。両方を組み合わせて使うのも普通です。カード一覧はGrid、カードの中身はFlexbox、という具合です。