CSSグリッド とは？

CSSで行と列を使って、要素の配置を決めるよ。親要素にdisplay: gridを指定すると、直接の子要素がグリッドの項目になる。カードを並べたり、ヘッダーを複数の列にまたがせたりできるんだ。

例えばgrid-template-columns: 1fr 1fr 1frで、使えるスペースを3つの列に分けるよ。gapでマス同士の隙間も指定できる。要素の内容に最低限必要な幅がある場合などは、列が想定どおりに縮まないこともあるんだ。

固定幅の列や隙間などを除いた、残りのスペースを1対2に分ける単位だよ。全体の幅をそのまま1対2にするという意味ではないんだ。必要に応じてminmax()で列の最小・最大の大きさも決められるよ。

Flexboxは主に一方向、グリッドは行と列を合わせて配置するのが得意だよ。ページの骨組みをグリッドで作り、その中のボタンをFlexboxで並べることもできる。片方がいつも優れているわけではなく、揃えたい方向で選ぼう。

subgridを使うと、子のグリッドが親の行や列の区切りを引き継げるよ。主要ブラウザー間では2023年9月から利用できる機能として扱われている。古いブラウザーも対象にする場合は対応状況を確認しよう。grid-template-areasなら、名前を付けて配置を決めることもできるんだ。