Tailwind CSS 布局：Grid

上一篇讲了适合一维排布的 Flexbox。本篇讲 Grid，它适合二维布局，能同时控制行和列，比如图片墙、卡片网格、后台仪表盘。

定义网格容器

创建网格容器

给元素加 grid 即可让它成为网格容器。之后用 grid-cols-* 指定列数。

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-100">1</div>
  <div class="p-4 bg-blue-100">2</div>
  <div class="p-4 bg-blue-100">3</div>
  <div class="p-4 bg-blue-100">4</div>
</div>

grid-cols-1 到 grid-cols-12 是常用预设。子项会自动从左到右、从上到下填充格子。

列与行

除了列，还可以用 grid-rows-* 显式设定行数。

<div class="grid grid-cols-2 grid-rows-2 gap-3">
  <div class="p-4 bg-green-100">A</div>
  <div class="p-4 bg-green-100">B</div>
  <div class="p-4 bg-green-100">C</div>
  <div class="p-4 bg-green-100">D</div>
</div>

任意值列宽

预设列数不够用时，可以用方括号写任意值，Tailwind v4 支持 grid-cols-[...]。

<div class="grid grid-cols-[200px_1fr_1fr] gap-4">
  <div class="p-4 bg-yellow-100">侧栏</div>
  <div class="p-4 bg-yellow-100">主区</div>
  <div class="p-4 bg-yellow-100">右区</div>
</div>

这里第一列固定 200px，后两列平分剩余空间。

跨格与流动

跨格

col-span-* 让某格横向跨越多列，row-span-* 纵向跨越多行。

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 p-4 bg-red-100">占两列</div>
  <div class="p-4 bg-red-100">一</div>
  <div class="p-4 bg-red-100">二</div>
  <div class="p-4 bg-red-100">三</div>
</div>

第一个格子用 col-span-2 占了前两列，后面的格子依次补位。

自动行列与流动方向

子项数量不固定时，用 auto-cols-* 和 auto-rows-* 控制自动创建轨道的尺寸。

<div class="grid grid-flow-col auto-cols-[120px] gap-2">
  <div class="p-4 bg-purple-100">1</div>
  <div class="p-4 bg-purple-100">2</div>
</div>

grid-flow-col 让子项按列优先排布（先填满一列再换列），默认是 grid-flow-row（按行优先）。还有 grid-flow-dense 可让网格尽量填补空隙。

响应式网格

配合断点变体可以让列数随屏幕变化，这在下一篇会详细讲。先给个预览。

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="p-4 bg-gray-100">卡片</div>
  <div class="p-4 bg-gray-100">卡片</div>
  <div class="p-4 bg-gray-100">卡片</div>
  <div class="p-4 bg-gray-100">卡片</div>
</div>

手机上一列，平板两列，桌面四列。

实战：图片墙

下面用 Grid 做一组规整的图片墙，其中一张图跨两列做视觉重点。

<div class="grid grid-cols-3 grid-rows-2 gap-2">
  <img class="col-span-2 h-40 w-full object-cover rounded" src="a.jpg" alt="主图">
  <img class="h-40 w-full object-cover rounded" src="b.jpg" alt="图二">
  <img class="h-40 w-full object-cover rounded" src="c.jpg" alt="图三">
  <img class="h-40 w-full object-cover rounded" src="d.jpg" alt="图四">
  <img class="h-40 w-full object-cover rounded" src="e.jpg" alt="图五">
</div>

第一张图用 col-span-2 横跨两列，整体排成 3 列 2 行。把 src 换成你自己的图片路径即可运行。

小结

Grid 的核心是 grid 容器加 grid-cols-* 定义列，再配合 gap-*、col-span-*、grid-flow-* 调整。任意值 grid-cols-[...] 能应对不规则布局。下一篇讲如何让布局随屏幕自适应。