CSS Grid
中級読み方：シーエスエスグリッド｜英語：CSS Grid
行と列の2次元レイアウトを作るCSS機能で、複雑なページレイアウトを直感的に組めるよ。
やさしい説明
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;
}よく使うプロパティ
| プロパティ | 役割 |
|---|---|
display: grid | グリッドを始めるスイッチ（親に付ける） |
grid-template-columns | 列の数と幅を決める（例: 1fr 1fr） |
gap | マス目の間の余白 |
1fr | 余ったスペースを等分する単位（fraction） |
repeat(3, 1fr) | 1fr 1fr 1fr の短縮形 |
いつ使う？
- カード一覧・写真ギャラリー（同じサイズのマスを並べる）
- ダッシュボードのパネル配置
- ページ全体のレイアウト（ヘッダー＋サイドバー＋メイン＋フッター）
- 画面幅で列数を自動で変えたいレスポンシブな一覧
repeat(auto-fit, minmax(250px, 1fr)) は中高生のサイト作りで超便利。「各カードは最低250px、入るだけ横に並べて、余りは均等に広げる」という意味で、これ1行でスマホもPCも自動対応のカード一覧が作れます。
間違いやすいポイント
❌ GridとFlexboxの使い分けに迷う
1列に並べるだけ → Flexbox。行と列の2次元配置 → Grid。「ナビメニュー＝Flex、カード一覧＝Grid」と覚えると迷いません。
❌ display: grid を子要素に付けてしまう
display: grid は親（コンテナ）に付けます。並べたいカード側（子）に付けても効きません。「箱の親に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で個別指定もできます。
関連用語
📖 関連レッスン
レッスンを見る →