CSS Grid

CSS Grid とは

CSS Grid は、行と列の 2 次元グリッドを定義し、要素を自由に配置する CSS のレイアウトシステムである。2017 年に主要ブラウザでサポートされた。Flexbox が 1 次元 (行または列) のレイアウトに適しているのに対し、Grid は 2 次元のレイアウトに適している。

基本的な使い方

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3列: 1:2:1 の比率 */
  grid-template-rows: auto 1fr auto;    /* 3行: ヘッダー、メイン、フッター */
  gap: 16px;                            /* 行間・列間 */
  min-height: 100vh;
}

よく使うパターン

ページレイアウト (ヘッダー + サイドバー + メイン + フッター)

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main   aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

レスポンシブカードグリッド

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
/* 画面幅に応じて自動的に列数が変わる (メディアクエリ不要) */

auto-fill + minmax(300px, 1fr) で、カードの最小幅を 300px に保ちつつ、画面幅に応じて列数が自動調整される。

ダッシュボード

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}
.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide  { grid-column: span 2; }

Flexbox との使い分け

観点	CSS Grid	Flexbox
次元	2 次元 (行 × 列)	1 次元 (行 or 列)
レイアウトの起点	グリッド定義に要素を配置	コンテンツのサイズに応じて配置
適するケース	ページレイアウト、ダッシュボード	ナビバー、ボタン群、カード横並び

実務では Grid と Flexbox を組み合わせる。ページ全体のレイアウトは Grid、コンポーネント内部の配置は Flexbox が一般的だ。

Tailwind CSS での Grid

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">メインコンテンツ</div>
  <div>サイドバー</div>
</div>

<!-- レスポンシブ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>カード 1</div>
  <div>カード 2</div>
  <div>カード 3</div>
</div>

subgrid

CSS Grid Level 2 の subgrid で、子グリッドが親グリッドのトラックを継承できる。カードのヘッダー、本文、フッターの高さを揃えるのに使う。

CSS Grid については関連書籍でも詳しく扱われている。