CSSグリッド
CSS Grid Layout
概要（サマリー）
CSSグリッドとは、Webページの要素を行と列の二次元グリッド上へ配置するCSSのレイアウト機能である。方眼紙へカードを並べるように、列幅、行高、間隔、配置範囲をまとめて設計できる。
詳細解説
行と列を持つレイアウト
グリッドを使う要素にdisplay: gridを指定し、列や行を定義する。子要素はグリッドアイテムとして各マスへ配置される。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
この例では利用可能な幅を三等分し、三列の間へ16pxの隙間を設ける。
frで余白を分配する
frはグリッド内の利用可能な空間を分ける単位である。1fr 2frなら、二列目がおおむね一列目の二倍になる。固定幅と組み合わせることもできる。
アイテムを複数マスへ広げる
grid-columnやgrid-rowを使うと、要素を複数の列や行へまたがらせられる。
.featured {
grid-column: span 2;
}
この指定では注目カードが二列分の幅を使う。
Flexboxとの使い分け
Flexboxは横または縦の一方向へ並べる処理が得意である。CSSグリッドは行と列を同時にそろえる二次元配置が得意である。一方だけに限定せず、ページ全体をGrid、カード内部をFlexboxにする組み合わせもよく使う。
レスポンシブに列数を変える
minmax()やauto-fitを使うと、画面幅に応じて列数を調整できる。レスポンシブなカード一覧では、狭い画面で一列、広い画面で複数列にする設計が便利である。
AIコーディングとの関係
AIには「最小240pxのカードを、入る数だけ自動配置する」「先頭カードだけ二列分にする」のように、最小幅、列数、例外を伝えるとよい。生成されたCSSでは、狭い画面で横スクロールしないか、表示順と読み上げ順が不自然になっていないかを確認する必要がある。
よくある勘違い
Gridを使えばFlexboxは不要？
不要にはならない。二次元配置と一方向配置で得意分野が異なり、組み合わせることも多い。
1frは常に全体の半分？
他の列や固定幅、隙間を差し引いた利用可能な空間を分ける単位である。常に画面全体の一定割合とは限らない。
見た目の順番を変えても問題ない？
CSSだけで見た目を並べ替えると、HTML上の読み上げ順やキーボード移動順とずれる場合がある。
まとめ
- CSSグリッドは行と列を扱う二次元レイアウト機能である
- fr、gap、spanなどで柔軟に配置できる
- Flexboxとは得意な方向が異なる
- レスポンシブ設計と読み上げ順にも注意する
情報ソース
より詳しくAIに聞いてみよう
- CSSグリッドを方眼紙に例えて説明してください。
- CSSグリッドとFlexboxの違いを教えてください。
- frとminmaxの使い方を整理してください。
- レスポンシブなカード一覧のCSSを書いてください。
- このGridレイアウトの崩れを診断してください。