CSS Gridとは何ですか？

CSSの2次元レイアウトシステム。行と列を定義してWebページの要素を格子状に配置する。

CSS Gridのポイントは？

行（row）と列（column）の2次元でレイアウトを定義。grid-template-columns / grid-template-rows で格子を定義。Flexboxが1次元（行or列）、Gridが2次元（行と列の両方）。レスポンシブデザインとの相性が抜群

【しーえすえすぐりっど】

CSS Grid とは？

💡 Webレイアウトの「方眼紙」

📌 このページのポイント

行（row）と列（column）の2次元でレイアウトを定義
grid-template-columns / grid-template-rows で格子を定義
Flexboxが1次元（行or列）、Gridが2次元（行と列の両方）
レスポンシブデザインとの相性が抜群

CSS Gridのイメージ

ひよこ

FlexboxとCSS Gridはどう使い分ける？

ペンギン先生

Flexboxは1次元（横並びor縦並び）のレイアウトに最適。ナビゲーションバーやカード一列並びに使う。CSS Gridは2次元（行と列の両方）のレイアウトに最適。ページ全体のレイアウトや画像ギャラリーに使う。両方を組み合わせるのが現代のCSS設計の基本だよ

ひよこ

基本的な書き方は？

ペンギン先生

display: gridで有効化して、grid-template-columns: 1fr 1fr 1frで3等分の列を作る。fr（fraction）は空き領域の比率。repeat(3, 1fr)と書いてもOK。gapプロパティで要素間の隙間を設定。auto-fillやminmax()を使えばレスポンシブなグリッドがメディアクエリなしで作れるよ

ひよこ

レスポンシブ対応は？

ペンギン先生

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))がレスポンシブの魔法の一行。「最小300px、残りは均等分配、入りきらなければ折り返す」という指定。画面幅に応じてカラム数が自動で変わる。メディアクエリを書かずにレスポンシブが実現できるんだよ

ひよこ

名前付きエリアって何？

ペンギン先生

grid-template-areasで視覚的にレイアウトを定義できる。"header header header" "sidebar main main" "footer footer footer"のように文字列でレイアウトを描く。各要素にgrid-area: headerのように名前を付けるだけ。コードを見るだけでレイアウトが想像できるから、保守性も高いよ

まとめ：ざっくりこれだけ覚えればOK！

「CSS Grid」って出てきたら「行と列で要素を格子状に配置するCSSレイアウト」と思えればだいたいOK！

📖 おまけ：英語の意味

「CSS Grid Layout」＝ CSSグリッドレイアウト

💬 Grid（格子）状にレイアウトする。2017年に主要ブラウザが一斉対応したよ

← 用語集にもどる