English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS Grid布局：网格容器与行列控制

1. Grid 容器与列定义

Grid 是二维布局模型，通过 grid 创建网格容器，使用 grid-cols-* 定义列数。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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>
逻辑代码 57 行（超过 40 行限制，仅展示）

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 vs Tailwind 传统方式需要在 CSS 中设置 display: grid 和 grid-template-columns 属性，而 Tailwind 使用 grid、grid-cols-3 等类名直接在 HTML 中声明。

💡 提示： grid-cols-12 是经典的 12 列网格系统，通过 col-span-* 可以灵活组合各种宽度。

2. 行定义（grid-rows）

grid-rows-* 定义网格的行数和行高。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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 vs Tailwind 传统方式需要在 CSS 中设置 grid-template-rows 属性，而 Tailwind 使用 grid-rows-3 等类名直接声明。自定义行高可使用任意值语法 grid-rows-[auto_1fr_auto]。

3. 列跨度（col-span）

col-span-* 让网格项目跨越多列。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">经典三栏布局（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">Header (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">Footer (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>
逻辑代码 42 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 grid-column: span 2 / span 2 属性，而 Tailwind 使用 col-span-2 类名直接声明。col-span-full 等价于跨越所有列。

4. 行跨度（row-span）

row-span-* 让网格项目跨越多行。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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 vs Tailwind 传统方式需要在 CSS 中设置 grid-row: span 3 / span 3 属性，而 Tailwind 使用 row-span-3 类名直接声明。

💡 提示： 结合 col-span-* 和 row-span-* 可以创建复杂的网格布局，如仪表盘、杂志风格页面等。

5. 网格线定位（col-start/row-start）

col-start-* 和 row-start-* 让项目精确放置在指定的网格线位置。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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">精确放置网格项目</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 vs Tailwind 传统方式需要在 CSS 中设置 grid-column-start、grid-column-end 等属性，而 Tailwind 使用 col-start-1、col-end-3 等类名直接声明。

⚠️ 注意： 网格线从 1 开始计数。col-start-1 表示从第一条列线开始，col-end-3 表示到第三条列线结束（跨越2列）。

6. 间距控制（gap）

Grid 布局同样使用 gap-* 控制行列间距。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- gap -->
    <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>

    <!-- gap-x gap-y -->
    <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">不同间距大小</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>
逻辑代码 58 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 column-gap 和 row-gap 属性，而 Tailwind 使用 gap-x-8 和 gap-y-2 类名直接声明。gap-4 同时设置两个方向的间距。

7. 网格流方向（grid-flow）

grid-flow-* 控制自动放置算法的方向。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- grid-flow-row -->
    <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>

    <!-- grid-flow-col -->
    <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>

    <!-- grid-flow-dense -->
    <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>
逻辑代码 44 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 grid-auto-flow 属性，而 Tailwind 使用 grid-flow-row、grid-flow-col、grid-flow-dense 等类名直接声明。

💡 提示： grid-flow-dense 会尝试填充网格中的空隙，适合瀑布流等场景。

8. 自动尺寸（auto-cols/auto-rows）

auto-cols-* 和 auto-rows-* 控制隐式网格轨道的尺寸。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- auto-cols-min -->
    <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>

    <!-- auto-cols-max -->
    <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>

    <!-- auto-cols-fr -->
    <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 vs Tailwind 传统方式需要在 CSS 中设置 grid-auto-columns 和 grid-auto-rows 属性，而 Tailwind 使用 auto-cols-min、auto-rows-fr 等类名直接声明。

9. 对齐控制

Grid 布局提供多层次的对齐控制：justify-items/items/place-items 控制项目在单元格内的对齐。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">
    <!-- justify-items -->
    <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>

    <!-- items -->
    <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>

    <!-- place-items -->
    <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>

    <!-- justify-items-stretch -->
    <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>
逻辑代码 45 行（超过 40 行限制，仅展示）

对齐类名对照：

类名 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 vs Tailwind 传统方式需要在 CSS 中分别设置 justify-items 和 align-items 属性，而 Tailwind 使用 place-items-center 一行代码实现水平垂直居中。

💡 提示： place-items-center 是最常用的居中方案，比 Flexbox 的 items-center justify-center 更简洁。

10. 综合示例

结合以上所有知识点，创建一个完整的 Grid 布局。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<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">Dashboard</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">响应式网格</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>
逻辑代码 85 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现仪表盘、杂志风格等复杂布局，而 Tailwind 使用 grid 工具类直接在 HTML 中完成，配合 col-span-* 和 row-span-* 灵活组合。

❓ 常见问题

Q Grid 和 Flexbox 什么时候用哪个？
A 一维布局（单行或单列）用 Flexbox，二维布局（行和列）用 Grid。导航栏、卡片列表用 Flexbox；仪表盘、网格图片用 Grid。两者可以嵌套使用。
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 控制网格项目之间的间距，不包含外边距。padding 控制容器内边距，包含所有项目。通常两者配合使用：gap 控制项目间距，padding 控制容器边距。

📖 小节

📝 作业

  1. ⭐ 创建一个 3 列等宽网格布局，使用 grid grid-cols-3 gap-4 展示 6 个卡片

  2. ⭐⭐ 创建一个经典的 12 列网格布局，包含页头（col-span-12）、侧边栏（col-span-3）、主内容（col-span-6）、页脚（col-span-12）

  3. ⭐⭐⭐ 创建一个仪表盘布局，使用 grid-cols-4 grid-rows-4 实现顶部导航（col-span-4）、侧边栏（row-span-3）、统计卡片和主内容区域

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏