CSS Grid — 先にマス目を引き、そこへ置く
Flexboxは1本の線に沿って並べる道具でした。対してCSS Gridは、先にマス目(格子)を引いてから、そこにアイテムを置く道具です。「行と列を自分で定義できる」――この一点が、Gridを理解する入口になります。
Gridの主役は、列の並びを決める grid-template-columns と、そのマスをどう埋めるかを決めるプロパティ群です。下の図1で値を切り替えると、マス目そのものが引き直されてアイテムが並び替わります。生成されるCSSも一緒に表示されるので、見た目と記述の対応を確かめながら触ってください。
repeat(3, 1fr) は「同じ幅の列を3本」。fr は余った幅の分け前を表す単位で、2fr 1fr 1fr なら先頭の列だけ2倍の幅になります。上のボタンを切り替えて、マス目の引き直しを見てください。
fr と auto-fill が効いてくる場面
Grid特有の単位 fr は「余りの取り分」を意味します。120px 1fr と書けば、左の列は固定120px、右の列は残り全部。サイドバー付きレイアウトがこの2語で書けるのが、Gridの気持ちよさです。% と違ってgapを引いた残りを分け合うので、はみ出しの計算に悩まされません。
そしてレスポンシブで強力なのが repeat(auto-fill, minmax(90px, 1fr)) です。これは「最低90pxを確保しつつ、入るだけ列を作れ」という指示。幅が広ければ列が増え、狭くなれば自動で減って折り返す――メディアクエリを1つも書かずにカードグリッドが完成します。図1でアイテム数を変えたり、ブラウザ幅を狭めたりすると、列数が勝手に変わるのが分かります。
アイテム側では grid-column: span 2 のようにマスをまたがせる指定ができます。ここがFlexboxとの決定的な違いで、Gridは行と列の両方を同時に制御できる――だからページ全体の骨組み(ヘッダー・サイドバー・本文・フッター)に向いています。逆に、ナビゲーションのリンクを横一列に並べるだけならFlexboxのほうが素直です。使い分けの目安は、2次元ならGrid、1次元ならFlex。
- grid-template-columns
- 列の幅を左から順に並べて定義する。列の本数もこれで決まる。
- fr
- gapなどを除いた余りスペースの取り分を表す単位。1fr 2fr なら 1:2 に分配される。
- repeat() / minmax()
- 同じ指定の繰り返しと、最小〜最大幅の指定。組み合わせると自動折り返しが作れる。
- auto-fill
- 入るだけ列を作る指定。幅に応じて列数が自動で増減する。
- span
- アイテムが何マス分を占めるかの指定。grid-column / grid-row で行・列それぞれに使える。
まとめ
CSS Gridは「マス目を引いてから置く」レイアウト手法です。まず grid-template-columns で列を定義し、アイテムは順にマスへ流し込まれる。余りを分ける fr、自動で列数を変える repeat(auto-fill, minmax(...))、マスをまたぐ span ――この3つを覚えれば、実務で必要なレイアウトのほとんどが書けます。2次元の骨組みはGrid、1次元の並びはFlexbox。この住み分けを押さえておけば迷いません。