CSS Grid
強力な2次元レイアウトシステム
CSS Gridとは？
日常での例え：Excel（スプレッドシート）
Excelのように「行」と「列」でマス目を作り、そこに要素を配置する仕組みです。
「このセルは2列分使う」「この領域をヘッダーにする」といった指定が簡単にできます。
なぜCSS Gridが必要？
Flexboxだけでは難しいこと：
- 「3列×2行」のような格子状レイアウト
- 「ヘッダーは横幅いっぱい、サイドバーは左側」のような複雑な配置
- 要素を特定のセルにピンポイントで配置
CSS Gridは「ページ全体の骨組み」を作るのに最適です。
「2次元レイアウト」とは？
横と縦の両方向を同時に制御すること。
Flexboxは「横だけ」または「縦だけ」だが、Gridは「両方同時に」制御できる。
基本の使い方
display: grid
列数を指定してグリッドを作成
css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3等分 */
gap: 10px;
}プレビュー
1
2
3
4
5
6
grid-template-columns
「fr」単位とは？
fr = fraction（分数・比率）の略。余ったスペースを「比率」で分ける単位です。
1fr 1fr 1fr → 3等分1fr 2fr 1fr → 真ん中が2倍の幅200px 1fr → 左は200px固定、残りは右が全部取る列の定義方法
px, fr, auto, repeat() など
css
/* 固定幅 */
grid-template-columns: 200px 200px 200px;
/* fr単位（比率） */
grid-template-columns: 1fr 2fr 1fr;
/* repeat() で繰り返し */
grid-template-columns: repeat(3, 1fr);
/* auto で内容に合わせる */
grid-template-columns: auto 1fr auto;
/* minmax() で最小・最大 */
grid-template-columns: repeat(3, minmax(100px, 1fr));プレビュー
1fr 2fr 1fr
1fr
2fr
1fr
repeat(4, 1fr)
1
2
3
4
grid-template-rows
行の定義
列と同じ書き方で行を指定
css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100px 200px 100px;
gap: 10px;
}
/* 自動生成される行の高さ */
.container {
grid-auto-rows: minmax(100px, auto);
}プレビュー
1
2
3
4
5
6
グリッド線を使った配置
grid-column / grid-row
複数のセルにまたがる配置
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* 列1から3まで（2列分） */
.wide {
grid-column: 1 / 3;
}
/* span で指定 */
.wide2 {
grid-column: span 2;
}
/* 行も同様 */
.tall {
grid-row: span 2;
}プレビュー
span 2
3
4
5
6
grid-template-areas
grid-template-areasとは？
グリッドの各領域に名前を付けて、視覚的にレイアウトを定義する方法です。
コードを見るだけでレイアウトが分かるのが大きなメリット！
複雑なページ構造（ヘッダー、サイドバー、メイン、フッター）に最適。
名前でレイアウト定義
視覚的にレイアウトを指定
css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }プレビュー
header
sidebar
main
footer
配置の制御
justify-items / align-items
セル内のアイテム配置
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* セル内の水平位置 */
justify-items: start | end | center | stretch;
/* セル内の垂直位置 */
align-items: start | end | center | stretch;
/* 一括指定 */
place-items: center; /* align justify */
}プレビュー
center
center
center
レスポンシブGrid
「レスポンシブ」とは？
画面サイズに応じて自動的にレイアウトが変わること。
PC、タブレット、スマホで同じサイトを見ても、見やすく表示される。
auto-fit と minmax() の組み合わせ
repeat(auto-fit, minmax(200px, 1fr))
→ 「最小200px、最大は均等に」で自動的に列数が決まる！
auto-fit / auto-fill
自動で列数を調整
css
/* 最小200px、最大1fr で自動配置 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* auto-fill: 空の列も作る */
/* auto-fit: 空の列を潰す */プレビュー
Item
Item
Item
Item
Flexbox vs Grid
Flexbox
- • 1次元（横 or 縦）レイアウト
- • コンテンツ主導の配置
- • ナビ、ボタングループに最適
Grid
- • 2次元（横と縦）レイアウト
- • レイアウト主導の配置
- • ページ構造、カードリストに最適