Grid レイアウト

この章では、CSS Grid を Tailwind CSS で活用する方法を学びます。

Grid コンテナの作成

grid クラスで Grid コンテナを作成します。

<div class="grid">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

カラム数の指定

固定カラム数

<!-- 3 カラム -->
<div class="grid grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

クラス	カラム数
grid-cols-1	1
grid-cols-2	2
grid-cols-3	3
grid-cols-4	4
grid-cols-6	6
grid-cols-12	12

v4 の動的カラム数

v4 では任意の数値を直接指定できます。

<!-- v4: 任意の数値 -->
<div class="grid grid-cols-5">...</div>
<div class="grid grid-cols-15">...</div>

自動フィット

<!-- コンテンツに合わせて自動調整 -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))]">
  <div>カード 1</div>
  <div>カード 2</div>
  <div>カード 3</div>
</div>

行数の指定

<div class="grid grid-rows-3 grid-flow-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

間隔 (gap)

<!-- 全方向 -->
<div class="grid grid-cols-3 gap-4">...</div>

<!-- 横と縦で異なる間隔 -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">...</div>

スパン (結合)

カラムスパン

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">2 カラム分</div>
  <div>1 カラム</div>
  <div>1 カラム</div>
  <div>1 カラム</div>
  <div class="col-span-3">3 カラム分</div>
</div>

クラス	スパン
col-span-1	1 カラム
col-span-2	2 カラム
col-span-3	3 カラム
col-span-full	全カラム

行スパン

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-span-2">2 行分</div>
  <div>通常</div>
  <div>通常</div>
  <div>通常</div>
  <div class="row-span-2">2 行分</div>
</div>

開始・終了位置

カラム位置

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-end-4">2〜3 カラム目</div>
  <div class="col-start-5">5 カラム目から</div>
</div>

クラス	位置
col-start-1	1 から開始
col-end-3	3 で終了
col-start-auto	自動

行位置

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-start-2 row-end-4">2〜3 行目</div>
</div>

配置

アイテムの配置 (place-items)

<!-- 中央揃え -->
<div class="grid place-items-center h-screen">
  <div>画面中央</div>
</div>

クラス	配置
place-items-start	開始位置
place-items-end	終了位置
place-items-center	中央
place-items-stretch	伸縮

コンテンツの配置 (place-content)

<div class="grid grid-cols-2 place-content-center h-64">
  <div>1</div>
  <div>2</div>
</div>

個別アイテムの配置 (place-self)

<div class="grid grid-cols-3 h-32">
  <div class="place-self-start">開始</div>
  <div class="place-self-center">中央</div>
  <div class="place-self-end">終了</div>
</div>

自動配置 (grid-auto-flow)

クラス	配置方向
grid-flow-row	行方向 (デフォルト)
grid-flow-col	列方向
grid-flow-row-dense	行方向 (密)
grid-flow-col-dense	列方向 (密)

<!-- 列方向に配置 -->
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

サブグリッド

サブグリッドの用途

サブグリッド (grid-cols-subgrid / grid-rows-subgrid) は CSS Grid Level 2 の機能です。子要素が親グリッドのトラック定義を継承できるため、カードリスト内のフッターの高さ揃え等に便利です。

サブグリッドユーティリティは Tailwind CSS v3.4 から利用できます (v4 でも同様)。

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-3 grid grid-cols-subgrid">
    <div>サブ 1</div>
    <div>サブ 2</div>
    <div>サブ 3</div>
  </div>
</div>

サブグリッドが特に有用なのは、カードリストのように複数の子要素の高さを揃えたい場合です。

<!-- カードリスト内でフッターの高さを揃える -->
<div class="grid grid-cols-3 gap-6">
  <div class="grid grid-rows-subgrid row-span-3">
    <h3 class="text-lg font-bold">タイトル</h3>
    <p class="text-gray-600">説明文 (長さが異なっても揃う)</p>
    <a href="#" class="text-blue-500">もっと見る →</a>
  </div>
  <!-- 他のカードも同じ構造 -->
</div>

実践例

ダッシュボードレイアウト

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen p-4">
  <!-- ヘッダー -->
  <header class="col-span-4 bg-white rounded-lg shadow-sm p-4">
    ヘッダー
  </header>

  <!-- サイドバー -->
  <aside class="row-span-2 bg-white rounded-lg shadow-sm p-4">
    サイドバー
  </aside>

  <!-- メインコンテンツ -->
  <main class="col-span-3 bg-white rounded-lg shadow-sm p-4">
    メインコンテンツ
  </main>

  <!-- フッター -->
  <footer class="col-span-3 bg-white rounded-lg shadow-sm p-4">
    フッター
  </footer>
</div>

カードギャラリー

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <img src="..." class="w-full h-48 object-cover" />
    <div class="p-4">
      <h3 class="font-bold">カード 1</h3>
      <p class="text-gray-600">説明文...</p>
    </div>
  </div>
  <!-- 繰り返し -->
</div>

画像グリッド

<div class="grid grid-cols-4 gap-2">
  <div class="col-span-2 row-span-2">
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
</div>

Flexbox vs Grid

用途	推奨
1 次元レイアウト (横並び・縦並び)	Flexbox
2 次元レイアウト (行と列)	Grid
コンテンツベースのサイズ調整	Flexbox
厳密なグリッド配置	Grid
ナビゲーション、ボタングループ	Flexbox
カードギャラリー、ダッシュボード	Grid

まとめ

• grid と grid-cols-* でグリッドレイアウト
• col-span-* / row-span-* でセル結合
• place-items-* でアイテムを配置
• gap で間隔を設定
• レスポンシブと組み合わせて柔軟なレイアウト

次に読む

• スペーシング — gap / margin / padding の使い分けを整理する
• Flexbox — 1 次元レイアウトとの使い分けを再確認する
• Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る