HTML/CSS基礎 2025.10.13

【CSS Grid入門】縦横を自在に操る！2次元レイアウトの考え方と実践

コンテンツ 非表示

1 第1章：Gridが必要な理由

2 第2章：基本構造（列定義とgap）

3 第3章：repeat / fr / minmax / auto-fit

4 第4章：span（複数マスをまたぐ）

5 第5章：grid-template-areas（可視化）

6 まとめ（Flexとの使い分け）

第1章：Gridが必要な理由

Flexboxは1次元、Gridは2次元（行×列）。カード一覧や料金表など「縦横の骨格」を同時に揃える場面ではGridが適任です。

ポイント： Gridは「親がマス目を定義し、子を指定位置に配置」する発想です。

第2章：基本構造（列定義とgap）

まずは2列のシンプルなグリッドから。


<section class="grid-wrap">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</section>


.grid-wrap { 
 display:grid; 
 grid-template-columns:1fr 1fr; 
 gap:16px; 
}
.item { 
 background:#e9f4fb; 
 border-radius:8px; 
 padding:20px; 
 text-align:center; 
 color:#1f3a56; 
 font-weight:600; 
}

第3章：repeat / fr / minmax / auto-fit

レスポンシブ時代の定番パターンです。


.grid-wrap {
 display:grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap:24px;
}

auto-fitは入るだけ自動で列を増やします。minmaxで最小幅を確保すると崩れにくくなります。

第4章：span（複数マスをまたぐ）

アイテムを横に2マス分使いたい時。


.item--wide { 
 grid-column: span 2; 
}

縦方向ならgrid-row: span 2;。注目カードを横長にして視線誘導できます。

第5章：grid-template-areas（可視化）


<section class="layout">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</section>


.layout{
 display:grid;
 grid-template-areas:
   "header header"
   "nav    main"
   "footer footer";
 grid-template-columns:200px 1fr;
 gap:16px;
}

header{
 grid-area:header;
 background:#a7d1f0
}
nav{
 grid-area:nav;
 background:#e9f4fb;
}
main{
 grid-area:main;
 background:#fff;
}
footer{
 grid-area:footer;
 background:#a7d1f0;
}

まとめ（Flexとの使い分け）

Grid＝骨格（行×列）、Flex＝中身の整列（1次元）
カード一覧／料金表／レイアウトの枠組みにGridが有効

Blog