Tailwind CSS Gridレイアウト：Gridコンテナと行/列制御
Gridコンテナと列定義
Gridは2次元のレイアウトモデルです。gridでGridコンテナを作成し、grid-cols-*で列数を定義します。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gridコンテナと列定義デモ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- grid-cols-2 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-cols-2</h3>
<div class="grid grid-cols-2 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
<div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
<div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
<div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
</div>
</div>
<!-- grid-cols-3 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-cols-3</h3>
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-green-500 text-white p-4 rounded text-center">1</div>
<div class="bg-green-600 text-white p-4 rounded text-center">2</div>
<div class="bg-green-700 text-white p-4 rounded text-center">3</div>
<div class="bg-green-800 text-white p-4 rounded text-center">4</div>
<div class="bg-green-900 text-white p-4 rounded text-center">5</div>
<div class="bg-green-950 text-white p-4 rounded text-center">6</div>
</div>
</div>
<!-- grid-cols-4 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-cols-4</h3>
<div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
<div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
<div class="bg-purple-800 text-white p-4 rounded text-center">4</div>
<div class="bg-purple-900 text-white p-4 rounded text-center">5</div>
<div class="bg-purple-950 text-white p-4 rounded text-center">6</div>
<div class="bg-purple-500 text-white p-4 rounded text-center">7</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">8</div>
</div>
</div>
<!-- レスポンシブ列 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">レスポンシブ：grid-cols-1 md:grid-cols-2 lg:grid-cols-3</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
<div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
<div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
<div class="bg-orange-800 text-white p-4 rounded text-center">4</div>
<div class="bg-orange-900 text-white p-4 rounded text-center">5</div>
<div class="bg-orange-950 text-white p-4 rounded text-center">6</div>
</div>
</div>
</div>
</body>
</html>
Grid列クラスリファレンス：
| クラス | 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-12 |
grid-template-columns: repeat(12, minmax(0, 1fr)) |
12列（クラシックグリッド） |
grid-cols-none |
grid-template-columns: none |
固定列なし |
従来のCSSとTailwindの比較 従来の方法ではCSSで
display: gridとgrid-template-columnsを設定する必要がありますが、Tailwindはgridやgrid-cols-3などのユーティリティクラスをHTML内で直接使用できます。
💡 ヒント：
grid-cols-12はクラシックな12列グリッドシステムです。col-span-*と組み合わせることで、様々な幅のレイアウトを柔軟に構成できます。
行定義（grid-rows）
grid-rows-*はGrid行の数と高さを定義します。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid行定義デモ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- grid-rows-3 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-rows-3</h3>
<div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
<div class="bg-blue-500 text-white p-2 rounded text-center text-sm">1,1</div>
<div class="bg-blue-600 text-white p-2 rounded text-center text-sm">1,2</div>
<div class="bg-blue-700 text-white p-2 rounded text-center text-sm">1,3</div>
<div class="bg-blue-800 text-white p-2 rounded text-center text-sm">2,1</div>
<div class="bg-blue-900 text-white p-2 rounded text-center text-sm">2,2</div>
<div class="bg-blue-950 text-white p-2 rounded text-center text-sm">2,3</div>
<div class="bg-blue-500 text-white p-2 rounded text-center text-sm">3,1</div>
<div class="bg-blue-600 text-white p-2 rounded text-center text-sm">3,2</div>
<div class="bg-blue-700 text-white p-2 rounded text-center text-sm">3,3</div>
</div>
</div>
<!-- カスタム行の高さ -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-rows-[auto_1fr_auto]（ヘッダー-コンテンツ-フッター）</h3>
<div class="grid grid-rows-[auto_1fr_auto] gap-4 bg-gray-100 p-4 rounded h-64">
<div class="bg-green-500 text-white p-4 rounded text-center">ヘッダー（auto）</div>
<div class="bg-green-600 text-white p-4 rounded text-center">コンテンツ（1fr）</div>
<div class="bg-green-700 text-white p-4 rounded text-center">フッター（auto）</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-template-rowsを設定する必要がありますが、Tailwindはgrid-rows-3などのユーティリティクラスをHTML内で直接使用できます。カスタム行の高さには任意値構文grid-rows-[auto_1fr_auto]を使用します。
列の結合（col-span）
col-span-*はGridアイテムを複数列にまたがらせます。
例
HTML
<!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="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- クラシックレイアウト -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">クラシック3カラムレイアウト（col-span）</h3>
<div class="grid grid-cols-12 gap-4 bg-gray-100 p-4 rounded">
<div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">ヘッダー（col-span-12）</div>
<div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">サイドバー（col-span-3）</div>
<div class="col-span-6 bg-blue-700 text-white p-4 rounded text-center">メインコンテンツ（col-span-6）</div>
<div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">サイドバー（col-span-3）</div>
<div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">フッター（col-span-12）</div>
</div>
</div>
<!-- 混合スパン -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">混合スパン</h3>
<div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
<div class="col-span-2 bg-green-500 text-white p-4 rounded text-center">col-span-2</div>
<div class="col-span-1 bg-green-600 text-white p-4 rounded text-center">col-span-1</div>
<div class="col-span-1 bg-green-700 text-white p-4 rounded text-center">col-span-1</div>
<div class="col-span-1 bg-green-800 text-white p-4 rounded text-center">col-span-1</div>
<div class="col-span-3 bg-green-900 text-white p-4 rounded text-center">col-span-3</div>
</div>
</div>
<!-- col-span-full -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">col-span-full（全列にまたがる）</h3>
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
<div class="col-span-full bg-purple-600 text-white p-4 rounded text-center">col-span-full</div>
<div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
<div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-column: span 2 / span 2を設定する必要がありますが、Tailwindはcol-span-2をHTML内で直接使用できます。col-span-fullは全列にまたがるのと同等です。
行の結合（row-span）
row-span-*はGridアイテムを複数行にまたがらせます。
例
HTML
<!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="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- row-span -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">row-spanの例</h3>
<div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
<div class="row-span-3 bg-blue-500 text-white p-4 rounded text-center flex items-center justify-center">row-span-3</div>
<div class="bg-blue-600 text-white p-4 rounded text-center">1,2</div>
<div class="bg-blue-700 text-white p-4 rounded text-center">1,3</div>
<div class="bg-blue-800 text-white p-4 rounded text-center">2,2</div>
<div class="bg-blue-900 text-white p-4 rounded text-center">2,3</div>
<div class="bg-blue-600 text-white p-4 rounded text-center">3,2</div>
<div class="bg-blue-700 text-white p-4 rounded text-center">3,3</div>
</div>
</div>
<!-- 実践的な応用：ダッシュボードレイアウト -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">ダッシュボードレイアウト</h3>
<div class="grid grid-cols-4 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-80">
<div class="col-span-4 bg-green-600 text-white p-4 rounded text-center flex items-center justify-center">ナビバー（col-span-4）</div>
<div class="row-span-2 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">サイドバー（row-span-2）</div>
<div class="col-span-3 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">メインコンテンツ（col-span-3）</div>
<div class="col-span-3 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">フッター（col-span-3）</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-row: span 3 / span 3を設定する必要がありますが、Tailwindはrow-span-3をHTML内で直接使用できます。
💡 ヒント：
col-span-*とrow-span-*を組み合わせることで、ダッシュボードやマガジンスタイルのページなど、複雑なGridレイアウトを作成できます。
グリッド線配置（col-start/row-start）
col-start-*とrow-start-*は、アイテムを指定されたグリッド線の位置に正確に配置します。
例
HTML
<!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="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<!-- col-start -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">col-start配置</h3>
<div class="grid grid-cols-6 gap-4 bg-gray-100 p-4 rounded">
<div class="col-start-1 col-end-3 bg-blue-500 text-white p-4 rounded text-center">col-start-1 col-end-3</div>
<div class="col-start-4 col-end-7 bg-blue-700 text-white p-4 rounded text-center">col-start-4 col-end-7</div>
<div class="col-start-2 col-span-4 bg-blue-600 text-white p-4 rounded text-center">col-start-2 col-span-4</div>
</div>
</div>
<!-- row-start -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">row-start配置</h3>
<div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
<div class="row-start-1 row-end-3 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">row-start-1 row-end-3</div>
<div class="row-start-2 col-start-2 col-span-2 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">row-start-2 col-start-2</div>
<div class="row-start-3 col-start-2 col-span-2 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">row-start-3 col-start-2</div>
</div>
</div>
<!-- 正確な配置 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">正確なGridアイテム配置</h3>
<div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-64">
<div class="col-start-1 row-start-1 bg-purple-500 text-white p-2 rounded text-center text-sm">(1,1)</div>
<div class="col-start-3 row-start-1 bg-purple-600 text-white p-2 rounded text-center text-sm">(3,1)</div>
<div class="col-start-2 row-start-2 col-span-2 row-span-2 bg-purple-700 text-white p-2 rounded text-center text-sm flex items-center justify-center">(2,2) span 2x2</div>
<div class="col-start-4 row-start-3 bg-purple-800 text-white p-2 rounded text-center text-sm">(4,3)</div>
<div class="col-start-1 row-start-4 col-span-4 bg-purple-900 text-white p-2 rounded text-center text-sm">下部全幅</div>
</div>
</div>
</div>
</body>
</html>
グリッド線配置クラスリファレンス：
| クラス | CSS 値 | 説明 |
|---|---|---|
col-start-1 |
grid-column-start: 1 |
列線1から開始 |
col-end-3 |
grid-column-end: 3 |
列線3で終了 |
col-span-2 |
grid-column: span 2 / span 2 |
2列にまたがる |
row-start-1 |
grid-row-start: 1 |
行線1から開始 |
row-end-3 |
grid-row-end: 3 |
行線3で終了 |
row-span-2 |
grid-row: span 2 / span 2 |
2行にまたがる |
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-column-start、grid-column-endなどを設定する必要がありますが、Tailwindはcol-start-1やcol-end-3などのユーティリティクラスをHTML内で直接使用できます。
⚠️ 注意： グリッド線は1から番号が始まります。
col-start-1は最初の列線から開始し、col-end-3は3番目の列線で終了（2列にまたがる）することを意味します。
Gap制御
Gridレイアウトでもgap-*を使用して行と列の間隔を制御します。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Gap制御デモ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">gap-4（均一間隔）</h3>
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
<div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
<div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
<div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
<div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
<div class="bg-blue-950 text-white p-4 rounded text-center">6</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">gap-x-8 gap-y-2（独立制御）</h3>
<div class="grid grid-cols-3 gap-x-8 gap-y-2 bg-gray-100 p-4 rounded">
<div class="bg-green-500 text-white p-4 rounded text-center">1</div>
<div class="bg-green-600 text-white p-4 rounded text-center">2</div>
<div class="bg-green-700 text-white p-4 rounded text-center">3</div>
<div class="bg-green-800 text-white p-4 rounded text-center">4</div>
<div class="bg-green-900 text-white p-4 rounded text-center">5</div>
<div class="bg-green-950 text-white p-4 rounded text-center">6</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">異なるGapサイズ</h3>
<div class="space-y-4">
<div>
<p class="text-sm text-gray-600 mb-2">gap-1（4px）</p>
<div class="grid grid-cols-4 gap-1 bg-gray-100 p-4 rounded">
<div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
<div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
<div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
<div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
</div>
</div>
<div>
<p class="text-sm text-gray-600 mb-2">gap-8（32px）</p>
<div class="grid grid-cols-4 gap-8 bg-gray-100 p-4 rounded">
<div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
<div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
<div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
<div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSで
column-gapとrow-gapを設定する必要がありますが、Tailwindはgap-x-8やgap-y-2をHTML内で直接使用できます。gap-4は両方向の間隔を一度に設定します。
Grid Flow方向（grid-flow）
grid-flow-*は自動配置アルゴリズムの方向を制御します。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Flow方向デモ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-flow-row（デフォルト）</h3>
<div class="grid grid-cols-3 grid-flow-row gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
<div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
<div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
<div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
<div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-flow-col</h3>
<div class="grid grid-rows-3 grid-flow-col gap-4 bg-gray-100 p-4 rounded h-48">
<div class="bg-green-500 text-white p-4 rounded text-center">1</div>
<div class="bg-green-600 text-white p-4 rounded text-center">2</div>
<div class="bg-green-700 text-white p-4 rounded text-center">3</div>
<div class="bg-green-800 text-white p-4 rounded text-center">4</div>
<div class="bg-green-900 text-white p-4 rounded text-center">5</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">grid-flow-dense（隙間を埋める）</h3>
<div class="grid grid-cols-4 grid-flow-dense gap-4 bg-gray-100 p-4 rounded">
<div class="col-span-2 bg-purple-500 text-white p-4 rounded text-center">col-span-2</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">1</div>
<div class="bg-purple-700 text-white p-4 rounded text-center">2</div>
<div class="col-span-2 bg-purple-800 text-white p-4 rounded text-center">col-span-2</div>
<div class="bg-purple-900 text-white p-4 rounded text-center">3</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">4</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-auto-flowを設定する必要がありますが、Tailwindはgrid-flow-row、grid-flow-col、grid-flow-denseなどのユーティリティクラスをHTML内で直接使用できます。
💡 ヒント：
grid-flow-denseはグリッドの隙間を埋めようとするため、メイソンリースタイルレイアウトなどに適しています。
自動サイズ設定（auto-cols/auto-rows）
auto-cols-*とauto-rows-*は暗黙のGridトラックのサイズを制御します。
例
HTML
<!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="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">auto-cols-min</h3>
<div class="grid grid-flow-col auto-cols-min gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white px-2 py-4 rounded text-center">短い</div>
<div class="bg-blue-600 text-white px-4 py-4 rounded text-center">中くらい</div>
<div class="bg-blue-700 text-white px-6 py-4 rounded text-center">長いコンテンツ</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">auto-cols-max</h3>
<div class="grid grid-flow-col auto-cols-max gap-4 bg-gray-100 p-4 rounded">
<div class="bg-green-500 text-white px-2 py-4 rounded text-center">短い</div>
<div class="bg-green-600 text-white px-4 py-4 rounded text-center">中くらい</div>
<div class="bg-green-700 text-white px-6 py-4 rounded text-center">長いコンテンツ</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">auto-cols-fr（均等スペース）</h3>
<div class="grid grid-flow-col auto-cols-fr gap-4 bg-gray-100 p-4 rounded">
<div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
<div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
<div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
</div>
</div>
</div>
</body>
</html>
自動サイズ設定クラスリファレンス：
| クラス | CSS 値 | 説明 |
|---|---|---|
auto-cols-min |
grid-auto-columns: min-content |
最小コンテンツ幅 |
auto-cols-max |
grid-auto-columns: max-content |
最大コンテンツ幅 |
auto-cols-fr |
grid-auto-columns: minmax(0, 1fr) |
均等スペース |
auto-cols-auto |
grid-auto-columns: auto |
自動（デフォルト） |
auto-rows-min |
grid-auto-rows: min-content |
最小コンテンツ高さ |
auto-rows-max |
grid-auto-rows: max-content |
最大コンテンツ高さ |
auto-rows-fr |
grid-auto-rows: minmax(0, 1fr) |
均等高さ |
auto-rows-auto |
grid-auto-rows: auto |
自動（デフォルト） |
従来のCSSとTailwindの比較 従来の方法ではCSSで
grid-auto-columnsとgrid-auto-rowsを設定する必要がありますが、Tailwindはauto-cols-minやauto-rows-frなどのユーティリティクラスをHTML内で直接使用できます。
配置制御
Gridレイアウトはマルチレベルの配置制御を提供します：justify-items/items/place-itemsはアイテムがグリッドセル内でどのように配置されるかを制御します。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid配置制御デモ</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-4xl mx-auto space-y-8">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">justify-items-center（水平中央揃え）</h3>
<div class="grid grid-cols-3 justify-items-center gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white px-2 py-4 rounded w-20 text-center">1</div>
<div class="bg-blue-600 text-white px-2 py-4 rounded w-20 text-center">2</div>
<div class="bg-blue-700 text-white px-2 py-4 rounded w-20 text-center">3</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">items-center（垂直中央揃え）</h3>
<div class="grid grid-cols-3 items-center gap-4 bg-gray-100 p-4 rounded h-32">
<div class="bg-green-500 text-white px-4 py-2 rounded text-center">低い</div>
<div class="bg-green-600 text-white px-4 py-6 rounded text-center">高い</div>
<div class="bg-green-700 text-white px-4 py-4 rounded text-center">中くらい</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">place-items-center（水平・垂直中央揃え）</h3>
<div class="grid grid-cols-3 place-items-center gap-4 bg-gray-100 p-4 rounded h-32">
<div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
<div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
<div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">justify-items-stretch（デフォルト）</h3>
<div class="grid grid-cols-3 justify-items-stretch gap-4 bg-gray-100 p-4 rounded">
<div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
<div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
<div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
</div>
</div>
</div>
</body>
</html>
配置クラスリファレンス：
| クラス | CSS 値 | 説明 |
|---|---|---|
justify-items-start |
justify-items: start |
水平開始位置に配置 |
justify-items-center |
justify-items: center |
水平中央揃え |
justify-items-end |
justify-items: end |
水平終了位置に配置 |
justify-items-stretch |
justify-items: stretch |
水平方向に引き伸ばし |
items-start |
align-items: start |
垂直開始位置に配置 |
items-center |
align-items: center |
垂直中央揃え |
items-end |
align-items: end |
垂直終了位置に配置 |
items-stretch |
align-items: stretch |
垂直方向に引き伸ばし |
place-items-center |
place-items: center |
水平・垂直中央揃え |
place-items-stretch |
place-items: stretch |
両方向に引き伸ばし |
従来のCSSとTailwindの比較 従来の方法ではCSSで
justify-itemsとalign-itemsを別々に設定する必要がありますが、Tailwindはplace-items-centerクラス1つで水平・垂直中央揃えを実現できます。
💡 ヒント：
place-items-centerは最もよく使われる中央揃えソリューションで、Flexboxのitems-center justify-centerよりも簡潔です。
総合例
上記のすべての概念を組み合わせて、完全なGridレイアウトを作成してみましょう。
例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid総合例</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
<div class="max-w-6xl mx-auto space-y-8">
<!-- ダッシュボードレイアウト -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">ダッシュボードレイアウト</h3>
<div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-96">
<!-- 上部ナビゲーション -->
<div class="col-span-4 bg-blue-600 text-white p-4 rounded flex items-center justify-between">
<span class="font-bold">ダッシュボード</span>
<span>ユーザーアバター</span>
</div>
<!-- サイドバー -->
<div class="row-span-3 bg-blue-500 text-white p-4 rounded">
<nav class="space-y-2">
<div class="p-2 bg-blue-400 rounded">概要</div>
<div class="p-2 hover:bg-blue-400 rounded">分析</div>
<div class="p-2 hover:bg-blue-400 rounded">設定</div>
</nav>
</div>
<!-- 統計カード -->
<div class="bg-green-500 text-white p-4 rounded flex flex-col justify-center">
<div class="text-2xl font-bold">1,234</div>
<div class="text-sm">総ユーザー数</div>
</div>
<div class="bg-green-600 text-white p-4 rounded flex flex-col justify-center">
<div class="text-2xl font-bold">567</div>
<div class="text-sm">アクティブユーザー</div>
</div>
<div class="bg-green-700 text-white p-4 rounded flex flex-col justify-center">
<div class="text-2xl font-bold">89%</div>
<div class="text-sm">成長率</div>
</div>
<!-- メインコンテンツ -->
<div class="col-span-3 row-span-2 bg-white p-4 rounded border">
<h4 class="font-semibold mb-2">データチャート</h4>
<div class="h-full bg-gray-50 rounded flex items-center justify-center text-gray-400">
チャート領域
</div>
</div>
</div>
</div>
<!-- マガジンスタイルレイアウト -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">マガジンスタイルレイアウト</h3>
<div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
<div class="col-span-2 row-span-2 bg-gradient-to-br from-purple-500 to-purple-700 text-white p-6 rounded flex flex-col justify-end">
<h3 class="text-2xl font-bold mb-2">トップニュース</h3>
<p class="text-sm opacity-90">これは最も重要なニュースコンテンツです</p>
</div>
<div class="bg-orange-500 text-white p-4 rounded">
<h4 class="font-semibold mb-2">ニュース 2</h4>
<p class="text-sm">簡単な説明...</p>
</div>
<div class="bg-orange-600 text-white p-4 rounded">
<h4 class="font-semibold mb-2">ニュース 3</h4>
<p class="text-sm">簡単な説明...</p>
</div>
<div class="bg-orange-700 text-white p-4 rounded">
<h4 class="font-semibold mb-2">ニュース 4</h4>
<p class="text-sm">簡単な説明...</p>
</div>
<div class="bg-orange-800 text-white p-4 rounded">
<h4 class="font-semibold mb-2">ニュース 5</h4>
<p class="text-sm">簡単な説明...</p>
</div>
</div>
</div>
<!-- レスポンシブグリッド -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-semibold mb-4">レスポンシブGrid</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
<div class="bg-blue-500 text-white p-6 rounded text-center">1</div>
<div class="bg-blue-600 text-white p-6 rounded text-center">2</div>
<div class="bg-blue-700 text-white p-6 rounded text-center">3</div>
<div class="bg-blue-800 text-white p-6 rounded text-center">4</div>
<div class="bg-blue-900 text-white p-6 rounded text-center">5</div>
<div class="bg-blue-950 text-white p-6 rounded text-center">6</div>
<div class="bg-blue-500 text-white p-6 rounded text-center">7</div>
<div class="bg-blue-600 text-white p-6 rounded text-center">8</div>
</div>
</div>
</div>
</body>
</html>
従来のCSSとTailwindの比較 従来の方法ではダッシュボードやマガジンスタイルのページなどの複雑なレイアウトのために大量のCSSを記述する必要がありますが、Tailwindは
col-span-*やrow-span-*と柔軟に組み合わせたGridユーティリティクラスをHTML内で直接使用して実現できます。
❓ よくある質問
Q GridとFlexboxはいつ使い分けるべきですか？
A 1次元レイアウト（単一行または列）にはFlexboxを、2次元レイアウト（行と列）にはGridを使用してください。ナビバーやカードリストはFlexboxに向いており、ダッシュボードや画像グリッドはGridに向いています。2つはネストして組み合わせることもできます。
Q grid-cols-12とgrid-cols-3の違いは何ですか？
A
grid-cols-12は12列のグリッドを作成し、col-span-*でアイテムの幅を定義する必要があります。grid-cols-3はシンプルな3列等幅グリッドを作成します。前者はより柔軟で、後者はよりシンプルです。Q レスポンシブグリッドはどうやって作成しますか？
A
grid-cols-1 md:grid-cols-2 lg:grid-cols-3のようなレスポンシブプレフィックスを使用して、異なるブレークポイントで列数を切り替えます。auto-fillとminmax()を使った自動レスポンシブも可能です。Q gapとpaddingの違いは何ですか？
A
gapはGridアイテム間の間隔を制御し、外側のマージンは含みません。paddingはコンテナの内側の余白を制御し、すべてのアイテムを包み込みます。通常は両方を組み合わせて使用します：gapでアイテム間隔、paddingでコンテナの余白です。📖 まとめ
gridでGridコンテナを作成し、grid-cols-*で列数を定義しますgrid-rows-*で行数を定義し、col-span-*/row-span-*でアイテムの結合を制御しますcol-start-*/row-start-*でグリッド線上の正確な位置にアイテムを配置しますgap-*/gap-x-*/gap-y-*で行と列の間隔を制御しますgrid-flow-row/grid-flow-col/grid-flow-denseで自動配置の方向を制御しますauto-cols-*/auto-rows-*で暗黙のGridトラックサイズを制御しますjustify-items/items/place-itemsでグリッドセル内のアイテム配置を制御します
📝 課題
-
⭐
grid grid-cols-3 gap-4を使用して3列等幅グリッドレイアウトを作成し、6枚のカードを表示してみましょう -
⭐⭐ ヘッダー（col-span-12）、サイドバー（col-span-3）、メインコンテンツ（col-span-6）、フッター（col-span-12）を持つクラシック12列グリッドレイアウトを作成してみましょう
-
⭐⭐⭐
grid-cols-4 grid-rows-4を使用してダッシュボードレイアウトを作成し、上部ナビバー（col-span-4）、サイドバー（row-span-3）、統計カード、メインコンテンツ領域を含めてみましょう