CSS Gridレイアウト（grid / grid-cols-*）

『Tailwind CSS』の Grid クラスは、grid・grid-cols-*・col-span-* などを組み合わせるだけで、CSS Grid Layout を手軽に構築できるユーティリティクラス群です。列数の指定・セルの結合・行の制御まで、クラスを追加するだけで柔軟なグリッドレイアウトを実現できます。

構文

グリッドレイアウトを使うには、まずコンテナに grid クラスを付けます。次に grid-cols-{n} で列数を指定し、子要素に col-span-{n} を付けることで、セルの横幅を複数列にまたがらせることができます。

<!-- grid: グリッドコンテナにします（display: grid） -->
<!-- grid-cols-3: 3 列のグリッドを定義します -->
<!-- gap-4: セル間の余白を 1rem に設定します -->
<div class="grid grid-cols-3 gap-4">

  <!-- col-span-3: 3 列すべてにまたがります -->
  <div class="col-span-3 bg-blue-200 p-4">ヘッダー（3列分）</div>

  <!-- col-span-2: 2 列分の幅を占有します -->
  <div class="col-span-2 bg-green-200 p-4">メイン（2列分）</div>

  <!-- 指定なし: 1 列分（デフォルト）を占有します -->
  <div class="bg-yellow-200 p-4">サイドバー（1列分）</div>

  <!-- col-span-3: フッターも 3 列すべてにまたがります -->
  <div class="col-span-3 bg-gray-200 p-4">フッター（3列分）</div>

</div>

grid-cols-* クラス一覧

grid-cols-{n} クラスは、グリッドコンテナの列数を指定します。n に 1〜12 の数値を指定でき、すべての列が等幅で生成されます。

クラス	CSS の値	説明
`grid-cols-1`	`grid-template-columns: repeat(1, minmax(0, 1fr))`	1 列のグリッドを定義します。
`grid-cols-2`	`grid-template-columns: repeat(2, minmax(0, 1fr))`	2 列のグリッドを定義します。
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr))`	3 列のグリッドを定義します。
`grid-cols-4`	`grid-template-columns: repeat(4, minmax(0, 1fr))`	4 列のグリッドを定義します。
`grid-cols-5`	`grid-template-columns: repeat(5, minmax(0, 1fr))`	5 列のグリッドを定義します。
`grid-cols-6`	`grid-template-columns: repeat(6, minmax(0, 1fr))`	6 列のグリッドを定義します。
`grid-cols-7`	`grid-template-columns: repeat(7, minmax(0, 1fr))`	7 列のグリッドを定義します。
`grid-cols-8`	`grid-template-columns: repeat(8, minmax(0, 1fr))`	8 列のグリッドを定義します。
`grid-cols-9`	`grid-template-columns: repeat(9, minmax(0, 1fr))`	9 列のグリッドを定義します。
`grid-cols-10`	`grid-template-columns: repeat(10, minmax(0, 1fr))`	10 列のグリッドを定義します。
`grid-cols-11`	`grid-template-columns: repeat(11, minmax(0, 1fr))`	11 列のグリッドを定義します。
`grid-cols-12`	`grid-template-columns: repeat(12, minmax(0, 1fr))`	12 列のグリッドを定義します。Bootstrap のグリッドと同じ 12 列で設計できます。
`grid-cols-none`	`grid-template-columns: none`	列の定義をリセットします。

col-span-* クラス一覧

col-span-{n} クラスは、グリッドアイテムが横方向に何列分を占有するかを指定します。ヘッダーやフッターを全幅にしたい場合などに活用します。

クラス	CSS の値	説明
`col-span-1`	`grid-column: span 1 / span 1`	1 列分を占有します（デフォルトと同じ）。
`col-span-2`	`grid-column: span 2 / span 2`	2 列分を占有します。
`col-span-3`	`grid-column: span 3 / span 3`	3 列分を占有します。
`col-span-4`	`grid-column: span 4 / span 4`	4 列分を占有します。
`col-span-5`	`grid-column: span 5 / span 5`	5 列分を占有します。
`col-span-6`	`grid-column: span 6 / span 6`	6 列分を占有します。12 列グリッドの半分幅です。
`col-span-7`	`grid-column: span 7 / span 7`	7 列分を占有します。
`col-span-8`	`grid-column: span 8 / span 8`	8 列分を占有します。
`col-span-9`	`grid-column: span 9 / span 9`	9 列分を占有します。
`col-span-10`	`grid-column: span 10 / span 10`	10 列分を占有します。
`col-span-11`	`grid-column: span 11 / span 11`	11 列分を占有します。
`col-span-12`	`grid-column: span 12 / span 12`	12 列すべてを占有します。全幅表示に使います。
`col-span-full`	`grid-column: 1 / -1`	列数に関わらず、全列にまたがります。`col-span-12` よりも汎用的です。

col-start-* / col-end-* クラス一覧

col-start-{n} と col-end-{n} を使うと、アイテムの開始・終了位置をグリッドラインで直接指定できます。任意の位置にアイテムを配置したい場合に使います。

クラス	CSS の値	説明
`col-start-1`	`grid-column-start: 1`	1 番目のグリッドラインから開始します。
`col-start-2`	`grid-column-start: 2`	2 番目のグリッドラインから開始します。
`col-start-3`	`grid-column-start: 3`	3 番目のグリッドラインから開始します。
`col-start-auto`	`grid-column-start: auto`	自動的に配置されます。
`col-end-2`	`grid-column-end: 2`	2 番目のグリッドラインで終了します。
`col-end-3`	`grid-column-end: 3`	3 番目のグリッドラインで終了します。
`col-end-auto`	`grid-column-end: auto`	自動的に終了位置を決定します。

grid-rows-* / row-span-* クラス一覧

列方向と同様に、行方向の制御も可能です。grid-rows-{n} で行数を定義し、row-span-{n} でアイテムが縦方向に何行分を占有するかを指定します。

クラス	CSS の値	説明
`grid-rows-1`	`grid-template-rows: repeat(1, minmax(0, 1fr))`	1 行のグリッドを定義します。
`grid-rows-2`	`grid-template-rows: repeat(2, minmax(0, 1fr))`	2 行のグリッドを定義します。
`grid-rows-3`	`grid-template-rows: repeat(3, minmax(0, 1fr))`	3 行のグリッドを定義します。
`grid-rows-4`	`grid-template-rows: repeat(4, minmax(0, 1fr))`	4 行のグリッドを定義します。
`grid-rows-5`	`grid-template-rows: repeat(5, minmax(0, 1fr))`	5 行のグリッドを定義します。
`grid-rows-6`	`grid-template-rows: repeat(6, minmax(0, 1fr))`	6 行のグリッドを定義します。
`grid-rows-none`	`grid-template-rows: none`	行の定義をリセットします。
`row-span-1`	`grid-row: span 1 / span 1`	1 行分を占有します。
`row-span-2`	`grid-row: span 2 / span 2`	2 行分を占有します。
`row-span-3`	`grid-row: span 3 / span 3`	3 行分を占有します。
`row-span-4`	`grid-row: span 4 / span 4`	4 行分を占有します。
`row-span-5`	`grid-row: span 5 / span 5`	5 行分を占有します。
`row-span-6`	`grid-row: span 6 / span 6`	6 行分を占有します。
`row-span-full`	`grid-row: 1 / -1`	行数に関わらず、全行にまたがります。

レスポンシブ対応

ブレークポイントのプレフィックスを付けることで、画面サイズに応じて列数を変更できます。書式は {ブレークポイント}:grid-cols-{n} です。モバイルファーストの設計で、小さい画面から順にクラスを積み重ねていきます。

<!-- スマートフォン: 1 列、sm（640px）以上: 2 列、lg（1024px）以上: 4 列にします -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-white rounded shadow p-4">カード 1</div>
  <div class="bg-white rounded shadow p-4">カード 2</div>
  <div class="bg-white rounded shadow p-4">カード 3</div>
  <div class="bg-white rounded shadow p-4">カード 4</div>
</div>

<!-- col-span-* もレスポンシブに切り替えられます -->
<!-- スマートフォンでは全幅、md（768px）以上では 2 列分にします -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-3 md:col-span-2 bg-blue-100 p-4">メイン</div>
  <div class="col-span-3 md:col-span-1 bg-gray-100 p-4">サイドバー</div>
</div>

ブレークポイント	幅の目安	クラス例
（なし）	全サイズ共通	`grid-cols-1`
`sm:`	640px 以上	`sm:grid-cols-2`
`md:`	768px 以上	`md:grid-cols-3`
`lg:`	1024px 以上	`lg:grid-cols-4`
`xl:`	1280px 以上	`xl:grid-cols-6`
`2xl:`	1536px 以上	`2xl:grid-cols-12`

サンプルコード

カードグリッドとダッシュボードレイアウトの実用例です。1 つ目は、スマートフォンで 1 列・PC で 3 列に切り替わるレスポンシブなカードグリッドです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カードグリッド サンプル</title>
  <!-- Tailwind CSS を CDN で読み込みます -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">

  <h1 class="text-2xl font-bold mb-6">商品一覧</h1>

  <!-- grid: グリッドコンテナにします -->
  <!-- grid-cols-1: スマートフォンでは 1 列で縦に並べます -->
  <!-- md:grid-cols-2: md（768px）以上では 2 列にします -->
  <!-- lg:grid-cols-3: lg（1024px）以上では 3 列にします -->
  <!-- gap-6: セル間の余白を 1.5rem に設定します -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- 各カードはグリッドの 1 セルを占有します -->
    <div class="bg-white rounded-lg shadow p-6">
      <!-- 画像の代わりにカラーブロックを表示します -->
      <div class="bg-blue-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 A</h2>
      <p class="text-gray-600 text-sm mb-4">シンプルで使いやすいデザインの商品です。</p>
      <p class="text-blue-600 font-bold text-xl">¥3,980</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
      <div class="bg-green-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 B</h2>
      <p class="text-gray-600 text-sm mb-4">高品質な素材を使用した人気商品です。</p>
      <p class="text-blue-600 font-bold text-xl">¥5,480</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
      <div class="bg-yellow-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 C</h2>
      <p class="text-gray-600 text-sm mb-4">限定カラーが揃ったスペシャルモデルです。</p>
      <p class="text-blue-600 font-bold text-xl">¥7,980</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
      <div class="bg-pink-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 D</h2>
      <p class="text-gray-600 text-sm mb-4">コンパクトで持ち運びに便利な商品です。</p>
      <p class="text-blue-600 font-bold text-xl">¥2,480</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
      <div class="bg-purple-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 E</h2>
      <p class="text-gray-600 text-sm mb-4">プロ仕様の機能を備えた上位モデルです。</p>
      <p class="text-blue-600 font-bold text-xl">¥12,800</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
      <div class="bg-orange-200 h-40 rounded mb-4"></div>
      <h2 class="font-bold text-lg mb-2">商品 F</h2>
      <p class="text-gray-600 text-sm mb-4">エントリーモデルとして最適な一品です。</p>
      <p class="text-blue-600 font-bold text-xl">¥1,980</p>
    </div>

  </div>

</body>
</html>

続いて、col-span-* と row-span-* を組み合わせたダッシュボードレイアウトの例です。ヘッダーを全幅に、左サイドバーを縦長に、メインエリアとサブウィジェットを配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ダッシュボード サンプル</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4 min-h-screen">

  <!-- grid: グリッドコンテナにします -->
  <!-- grid-cols-4: 4 列のグリッドを定義します -->
  <!-- grid-rows-3: 3 行のグリッドを定義します -->
  <!-- gap-4: セル間の余白を 1rem に設定します -->
  <div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen">

    <!-- col-span-4: ヘッダーは 4 列すべてにまたがります -->
    <header class="col-span-4 bg-blue-700 text-white rounded-lg p-4 flex items-center">
      <h1 class="text-xl font-bold">管理ダッシュボード</h1>
    </header>

    <!-- row-span-2: サイドバーは 2 行分の高さを占有します -->
    <nav class="row-span-2 bg-white rounded-lg shadow p-4">
      <h2 class="font-bold mb-3 text-gray-700">メニュー</h2>
      <ul class="space-y-2 text-sm text-gray-600">
        <li class="p-2 bg-blue-50 rounded">ダッシュボード</li>
        <li class="p-2 hover:bg-gray-50 rounded">ユーザー管理</li>
        <li class="p-2 hover:bg-gray-50 rounded">商品管理</li>
        <li class="p-2 hover:bg-gray-50 rounded">注文管理</li>
        <li class="p-2 hover:bg-gray-50 rounded">レポート</li>
      </ul>
    </nav>

    <!-- col-span-2: メインエリアは 2 列分を占有します -->
    <!-- row-span-2: メインエリアは 2 行分の高さも占有します -->
    <main class="col-span-2 row-span-2 bg-white rounded-lg shadow p-6">
      <h2 class="font-bold text-lg mb-4 text-gray-700">売上グラフ</h2>
      <!-- グラフの代わりにカラーブロックで表示エリアを示します -->
      <div class="bg-blue-50 rounded h-4/5 flex items-center justify-center text-gray-400">
        グラフ表示エリア
      </div>
    </main>

    <!-- サイドウィジェット: 残り 1 列に 2 行分が収まります -->
    <div class="bg-white rounded-lg shadow p-4">
      <h2 class="font-bold mb-2 text-gray-700 text-sm">本日の注文数</h2>
      <p class="text-3xl font-bold text-blue-600">142</p>
      <p class="text-xs text-gray-500 mt-1">前日比 +23</p>
    </div>

    <div class="bg-white rounded-lg shadow p-4">
      <h2 class="font-bold mb-2 text-gray-700 text-sm">本日の売上</h2>
      <p class="text-3xl font-bold text-green-600">¥384,200</p>
      <p class="text-xs text-gray-500 mt-1">前日比 +12%</p>
    </div>

    <!-- col-span-4: フッターも 4 列すべてにまたがります -->
    <footer class="col-span-4 bg-white rounded-lg shadow p-3 flex items-center text-sm text-gray-500">
      © 2025 管理システム
    </footer>

  </div>

</body>
</html>

概要

Grid クラスは『Tailwind CSS』が提供するグリッドレイアウトの制御クラス群です。grid クラスでコンテナをグリッドにし、grid-cols-{n} で列数、col-span-{n} でセルの結合幅を指定する組み合わせが基本パターンです。行方向には grid-rows-{n} と row-span-{n} を使います。

レスポンシブ対応として grid-cols-1 md:grid-cols-2 lg:grid-cols-3 のようにブレークポイントを重ねることで、画面サイズに応じた列数の切り替えを1行で実現できます。カードグリッドやダッシュボードなど、複雑な二次元レイアウトを CSS を別途書かずに構築できるのが大きな利点です。

Tailwind CSS辞典