CSS Grid
中級読み方：シーエスエスグリッド｜英語：Css Grid
行と列の2次元レイアウトを作るCSS機能で、複雑なページレイアウトを直感的に組めるよ。いつ使う？ カード一覧を3列に並べたい、ヘッダー・サイドバー・メインの複雑なレイアウトを作りたいときに使うよ。間違いやすいポイント: grid-template-columnsの値はカンマではなくスペースで区切るよ。また、display: gridは親要素に書くこと。子要素に書いても効かないよ。
やさしい説明
CSS Gridは、Webページを行と列のマス目に分けてレイアウトする仕組みです。
Flexboxが1方向の並びに強いのに対し、Gridは縦横両方を同時に制御できます。ページ全体のレイアウトや、カード一覧の配置に最適です。
repeat(auto-fit, minmax(250px, 1fr)) を使えば、画面幅に応じて自動で列数が変わるレスポンシブなグリッドも簡単に作れます。
具体例・使い方
/* 3列均等グリッド */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* レスポンシブ（自動で列数が変わる） */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}いつ使う？
カード一覧、写真ギャラリー、ダッシュボード、ページ全体のレイアウト（ヘッダー+サイドバー+メイン+フッター）に使います。
間違いやすいポイント
❌ GridとFlexboxの使い分け
1列に並べるだけ → Flexbox。行と列の2次元配置 → Grid。「ナビメニュー＝Flex、カード一覧＝Grid」と覚えましょう。
よくある疑問
Q: FlexboxとGridの使い分けは？
A: 1方向の並びはFlexbox、2次元のレイアウトはGridが適しています。ナビバーはFlex、カード一覧はGridがおすすめです。
Q: レスポンシブなGridを作るには？
A: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); で、画面幅に応じて列数が自動調整されます。
Q: gap プロパティとは？
A: Grid（やFlexbox）の子要素間の隙間を指定します。gap: 16px; で全方向、row-gap/column-gapで個別指定もできます。
関連用語
📖 関連レッスン
レッスンを見る →