19. Grid布局：模板与间距

本节目标：理解 Grid 二维布局模型，学会用 Tailwind 工具类定义行列模板、控制间距、实现跨行列布局，能搭建响应式卡片网格。

Grid 跟 Flexbox 最大的区别：Flexbox 是一维的（只管行或列），Grid 是二维的（同时控制行和列）。当你需要精确控制元素在水平和垂直两个方向上的位置时，Grid 是更好的选择。

启用 Grid 容器

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

只写 grid 不会有任何效果——默认是 1 列。你需要告诉它有多少列。

定义列模板：grid-cols-{n}

grid-cols-{n} 是最常用的 Grid 工具类，定义网格有多少列以及每列的宽度。

<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-3 生成 3 列等宽的网格，对应 CSS 是 grid-template-columns: repeat(3, minmax(0, 1fr))。

Tailwind 提供从 grid-cols-1 到 grid-cols-12，还有两个特殊值：

grid-cols-none → 不定义列，子元素不用网格布局
grid-cols-subgrid → 子网格，继承父网格的列定义

Note

为什么是 minmax(0, 1fr) 而不是 1fr 1fr 1fr？minmax(0, ...) 允许列缩小到 0，防止内容撑破网格。这是 Tailwind 的贴心设计。

定义行模板：grid-rows-{n}

行模板跟列模板类似，但实际用得少一些——通常让内容撑开高度更自然。

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3">跨 3 行</div>
  <div>正常</div>
  <div>正常</div>
  <div>正常</div>
</div>

grid-flow-col 让项目先填满列再换行，配合 grid-rows-3 可以创建从上到下、从左到右的填充顺序。

间距控制：gap

Grid 的 gap 跟 Flexbox 的 gap 用法一样，设置网格线之间的间距。

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

也可以分别控制：

gap-x-4 → 列间距
gap-y-2 → 行间距

跨列与跨行

让一个网格项目占据多个单元格，用 col-span-{n} 和 row-span-{n}：

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-100">跨 2 列</div>
  <div>1 列</div>
  <div>1 列</div>
  <div>1 列</div>
</div>

col-span-full 可以让项目跨越所有列，相当于 col-span-12（不管定义了多少列）。

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-full bg-gray-100">全宽标题</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
</div>

精确定位：start / end

除了跨列，还可以指定项目从哪列开始、到哪列结束：

类名	效果
`col-start-{n}`	从第 n 列线开始
`col-end-{n}`	到第 n 列线结束
`row-start-{n}`	从第 n 行线开始
`row-end-{n}`	到第 n 行线结束

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4">从第 2 列开始，跨 4 列</div>
  <div class="col-start-1 col-end-3">第 1-2 列</div>
  <div class="col-end-7 col-span-2">跨 2 列，到第 7 列结束</div>
  <div class="col-start-1 col-end-7">全宽</div>
</div>

Tip

网格线编号从 1 开始。6 列的网格有 7 条列线（1 到 7）。col-start-1 col-end-7 就是全宽。

响应式网格

Grid 最强大的地方是响应式。结合 Tailwind 的断点前缀，不同屏幕不同列数：

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
</div>

手机（< 640px）：1 列
平板（>= 640px）：2 列
桌面（>= 1024px）：4 列

这就是商品列表、博客卡片、图库的标准做法。

对齐属性

Grid 有两层对齐概念，容易搞混：

项目对齐（justify-items / align-items）：控制每个网格单元格内的内容对齐。

<div class="grid grid-cols-3 items-center justify-items-center">
  <div>居中</div>
  <div>居中</div>
  <div>居中</div>
</div>

items-center → 垂直居中
justify-items-center → 水平居中
place-items-center → 两者同时（简写）

内容对齐（justify-content / align-content）：控制整个网格在容器内的对齐。

Note

content-* 只在网格总尺寸小于容器时才有效果。如果网格已经撑满容器，它不会有任何作用。

实际应用：不规则网格

用 col-span 和 row-span 可以创建杂志风格的布局：

<div class="grid grid-cols-3 gap-4">
  <!-- 大图：跨 2 列 2 行 -->
  <div class="col-span-2 row-span-2 bg-blue-200 p-4">
    特色内容
  </div>
  <div class="bg-gray-100 p-4">小卡片 1</div>
  <div class="bg-gray-100 p-4">小卡片 2</div>
  <div class="bg-gray-100 p-4">小卡片 3</div>
  <div class="bg-gray-100 p-4">小卡片 4</div>
</div>

实际应用：12 列网格系统

很多 UI 框架用 12 列网格系统，Tailwind 原生支持：

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-3">侧栏</div>
  <div class="col-span-12 md:col-span-9">主内容</div>
</div>

12 列的好处是可以灵活组合：1/12、2/12（1/6）、3/12（1/4）、4/12（1/3）、6-12（1/2）等等。

本节小结

Grid 的核心工具类：

grid → 启用网格布局
grid-cols-{n} → 定义列数和宽度
grid-rows-{n} → 定义行数
gap-* → 网格间距
col-span-{n} / row-span-{n} → 跨列/跨行
col-start-{n} / col-end-{n} → 精确定位
items-* / content-* → 对齐控制

Grid 和 Flexbox 不是替代关系，而是互补。简单的一维排列用 Flexbox，复杂的二维布局用 Grid。实际项目中经常混用——外层 Grid 搭大框架，内层 Flexbox 处理细节对齐。