【しーえすえすぐりっど】
CSS Grid とは？
最終更新:
💡 Webレイアウトの「方眼紙」
行と列を使って要素を配置する、CSSの2次元レイアウトの仕組み。列幅や行高、間隔、要素が占める範囲を指定してWebページの配置を組み立てる。
📌 このページのポイント
- 行と列を組み合わせて、要素の位置と占める範囲を指定する
- grid-template-columnsとgrid-template-rowsで列・行を定義する
- frは残りの空間を比率で分ける単位。内容の最小幅にも注意する
- 見た目の並べ替えは、読み上げやキーボードの順序を変えない
ひよこ Flexboxとどう使い分ける？
ペンギン先生 ひよこ 基本の書き方は？
ペンギン先生 親要素にdisplay: gridを指定するよ。grid-template-columns: repeat(3, 1fr)なら、残りの空間を同じ比率で使う3列を定義できる。gapで列や行の間隔も指定する。ただし1frには自動の最小幅があり、長い文字列などの内容によっては均等な幅にならないこともあるんだ。
ひよこ auto-fillなら、狭い画面にも必ず収まる？
ペンギン先生 repeat(auto-fill, minmax(300px, 1fr))は、最小300pxの列が入る数を自動で決める指定だよ。けれど、配置先の幅が300px未満なら1列でもはみ出す。狭い幅での最小値を見直す、メディアクエリで切り替えるなど、実際の表示幅に合う設計が必要なんだ。
ひよこ 名前付きエリアって何？
ペンギン先生 grid-template-areasで区画に名前を付け、各要素のgrid-areaで配置先を指定する方法だよ。たとえば「header header」「sidebar main」「footer footer」のように配置を表す。各行の区画数をそろえ、同じ名前の区画は途中が欠けない一つの長方形にする必要があるんだ。
ひよこ 見た目の順序を変えれば、読む順序も変わる？
📖 おまけ：英語の意味
「CSS Grid Layout」 ＝ CSSの格子状レイアウト
💬 gridは格子という意味だよ。行と列からなる格子を定義し、要素を一つまたは複数の区画に配置するんだ。