Grid
初級読み方：グリッド｜英語：Grid
行と列で要素を配置するレイアウト方法で、Flexboxより複雑なレイアウトに向くよ。いつ使う？ カードの一覧表示、写真ギャラリー、ダッシュボードなど、2次元（横と縦）の配置が必要なときに使うよ。間違いやすいポイント: grid-template-columns の値はカンマ区切りではなくスペース区切りだよ。1fr 1fr 1fr で3等分。また、display: grid は親要素に書くことを忘れずに。
やさしい説明
Grid（グリッド）とは、要素を格子状（行と列）に配置するCSSレイアウト方法です。
Excel（表計算ソフト）のセルをイメージしてください。行と列を定義して、要素を好きなセルに配置できます。複数のセルをまたぐこともできます。
Flexboxが「1列に並べる」のに対し、Gridは「行と列の2次元で配置する」のが得意です。ページ全体のレイアウト（ヘッダー、サイドバー、メイン、フッター）を作るのに最適です。
図解：Gridレイアウト
具体例・使い方
/* 3列均等のグリッド */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* レスポンシブ: 画面幅に応じて列数が変わる */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}いつ使う？
写真ギャラリー、カード一覧、ページ全体のレイアウト（ヘッダー＋サイドバー＋メイン＋フッター）など、2次元の配置が必要なときに使います。
間違いやすいポイント
❌ FlexboxとGridの使い分けがわからない
1列に並べるだけ → Flexbox。行と列の2次元配置 → Grid。迷ったら「ナビメニュー＝Flex、カード一覧＝Grid」と覚えましょう。
❌ gapの代わりにmarginを使う
Grid/Flexboxでは gap プロパティで要素間の隙間を指定できます。marginより簡単で、端に余計な余白がつきません。
よくある疑問
Q: Gridはいつ使う？
A: カードの一覧表示、ダッシュボード、複雑なレイアウトなど、2次元の配置が必要なときに使います。1方向だけならFlexboxの方がシンプルです。
Q: fr単位とは？
A: fraction（分数）の略で、余ったスペースを比率で分配します。grid-template-columns: 1fr 2fr; で1:2の比率になります。
Q: repeat()とは？
A: 同じ値の繰り返しを省略する関数です。grid-template-columns: repeat(3, 1fr); は 1fr 1fr 1fr と同じ意味です。
関連用語
📖 関連レッスン
レッスンを見る →