CSS

CSS Gridレイアウトの使い方完全ガイド｜基本から実例まで解説

✅ CSS Gridとは？

CSS Grid（グリッドレイアウト） は、CSSでWebページのレイアウトを作るための仕組みのひとつです。
縦横の2次元レイアウトが得意で、行（row）と列（column）を自由に組み合わせてデザインできます。

従来のfloatやflexboxでは難しかった、複雑な2次元レイアウトを簡単に実現できるのが最大の特徴です。

💡 Flexboxとの違い

  • Flexbox → 1次元（横方向 or 縦方向）のレイアウトに強い
  • CSS Grid → 2次元（縦＋横）のレイアウトが得意

📌 基本的な使い方

1. グリッドを有効化

.container {
  display: grid;
}

これだけで、そのコンテナ要素の中の子要素がグリッドとして扱われます。

2. 行と列のサイズを指定

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 列の幅 */
  grid-template-rows: 100px 100px; /* 行の高さ */
}
  • grid-template-columns → 列の幅を設定
  • grid-template-rows → 行の高さを設定

3. 実用的な書き方（fr単位）

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 比率で指定 */
}
  • fr は 利用可能なスペースの割合 を表す単位
  • 1fr 2fr 1fr → 左1：中央2：右1 の比率で分割

4. 要素間の間隔（ギャップ）

.container {
  display: grid;
  grid-gap: 20px; /* 行と列の間隔 */
}
  • grid-gap → row-gap と column-gap をまとめて指定
  • 最近は gap プロパティでもOK

5. 子要素の配置指定

.item1 {
  grid-column: 1 / 3; /* 列1から列3まで結合 */
  grid-row: 1 / 2; /* 行1から行2まで結合 */
}

これで、特定の要素を好きな位置・サイズで配置できます。

🎯 実例：3カラムレイアウト

<div class="container">
  <div class="item">Header</div>
  <div class="item">Sidebar</div>
  <div class="item">Main Content</div>
  <div class="item">Footer</div>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左サイドバー＋メイン */
  grid-template-rows: 80px 1fr 50px; /* ヘッダー・メイン・フッター */
  gap: 10px;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* ヘッダーは横いっぱい */
}
.item:nth-child(4) {
  grid-column: 1 / 3; /* フッターも横いっぱい */
}

⚠️ 初心者がつまずきやすいポイント

  1. frとautoの使い分け
  • 固定幅 → px
  • 自動調整 → auto
  • 比率 → fr
  1. レスポンシブ対応
  • minmax() や repeat() を使うと便利
  1. サポートブラウザ
  • モダンブラウザはほぼ対応済み（IE11は部分対応）

🚀 上級者向けテクニック

  • repeat() で列をまとめて指定
grid-template-columns: repeat(3, 1fr); /* 1frの列を3つ */
  • minmax() でレスポンシブ
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

📌 まとめ

  • CSS Gridは2次元レイアウトが得意
  • display: gridで簡単に使える
  • frやminmax()を使うとレスポンシブにも強い
  • Flexboxと組み合わせるとさらに便利

-CSS