Grid 布局（网格布局）是目前 CSS 中最强大的二维布局系统。它非常适合处理复杂的网页结构，比如多列的新闻列表、商品画廊等。
Tailwind CSS Grid 基础语法
在 Tailwind CSS 中，如果想要开启 Grid 布局，我们首先需要在父容器加上 “grid” 类名，然后通过 “grid-cols-*” 来定义每一行有多少列。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| grid-cols-1 | grid-template-columns: repeat(1, ...); | 单列 |
| grid-cols-2 | grid-template-columns: repeat(2, ...); | 两列 |
| grid-cols-3 | grid-template-columns: repeat(3, ...); | 三列 |
| grid-cols-4 | grid-template-columns: repeat(4, ...); | 四列 |
| grid-cols-none | grid-template-columns: none; | 不分列 |
与 “Tailwind CSS Flex 布局” 一样，如果想要定义子元素之间的间距，我们也是使用 “gap-*” 相关类名来实现。
语法：
gap-{值}说明：
这里的 “值” 可以是一个 “数字”，比如：
gap-1：表示间距为 4px。gap-2：表示间距为 8px。gap-3：表示间距为 12px。- ……
此外，“值” 也可以是任意值，比如 “gap-[10px]” 表示间距为 10px。
Grid 布局本身是比较复杂的，如果小伙伴们对这块不熟悉，一定要把原生 CSS Grid 布局相关的属性都搞清楚了，再来学习本节内容。其中，Grid 布局主要属性如下表所示。
| 属性 | 说明 |
|---|---|
| grid-template-columns | 定义网格的列 |
| grid-template-rows | 定义网格的行 |
| grid-template-areas | 定义网格的区域名称 |
| grid-template | 简写属性，设置网格的行、列和区域 |
| grid-area | 指定网格项目的区域 |
| grid-row-start | 设置网格项目的起始行 |
| grid-row-end | 设置网格项目的结束行 |
| grid-row | 简写属性，设置网格项目的行范围 |
| grid-column-start | 设置网格项目的起始列 |
| grid-column-end | 设置网格项目的结束列 |
| grid-column | 简写属性，设置网格项目的列范围 |
| grid-auto-rows | 设置自动生成的行尺寸 |
| grid-auto-columns | 设置自动生成的列尺寸 |
| grid-auto-flow | 控制网格项目的自动放置顺序 |
示例 1：标准三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="grid grid-cols-3 gap-4">
<div class="h-20 bg-blue-400 rounded shadow"></div>
<div class="h-20 bg-blue-400 rounded shadow"></div>
<div class="h-20 bg-blue-400 rounded shadow"></div>
<div class="h-20 bg-blue-400 rounded shadow"></div>
<div class="h-20 bg-blue-400 rounded shadow"></div>
<div class="h-20 bg-blue-400 rounded shadow"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
使用 Tailwind CSS 实现 3 列布局非常简单，我们首先给父元素加上 “grid”，表示开启网格布局。然后再给父元素加上 “grid-cols-3”，表示将父容器平均分为 3 份。
最后，“gap-4” 表示让每个子元素之间自动留出 16px 的空隙。这样即使这里有 6 个子元素，它们也会自动排列成 2 行、每行 3 个。
Tailwind CSS Grid 跨行跨列
有时候，我们希望某个子元素能占据比别的子元素更多的宽度或高度（比如第一篇文章是头条，需要占两份宽）。
在 Tailwind CSS 中，我们可以给子元素加一个 “row-span-*” 类名来实现跨行效果，也可以给子元素加一个 “col-span-*” 类名来实现跨列效果。
语法：
row-span-{数字}
col-span-{数字}说明：
“row-span-*” 和 “col-span-*” 是相似的。就拿 “row-span-*” 来说，它必须写在子元素上，以表示该子元素跨越多少行，其中：
row-span-2：表示跨越 2 行。row-span-3：表示跨越 3 行。- ……
示例 2：跨列效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-20 bg-red-400 rounded"></div>
<div class="h-20 bg-gray-300 rounded"></div>
<div class="h-20 bg-gray-300 rounded"></div>
<div class="h-20 bg-gray-300 rounded"></div>
<div class="h-20 bg-gray-300 rounded"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
“col-span-2” 表示该子元素需要横跨 2 列。
Tailwind CSS Grid 一键居中
在上一节学习 Flex 布局时，我们知道要让元素水平垂直居中，需要同时写 justify-center 和 items-center。
但如果使用了 Grid 布局，Tailwind CSS 提供了一个快捷的类名：place-items-center。只需这一个类名，我们就能让网格里的内容完美垂直居中和水平居中。
示例 3：Grid 实现完美居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="grid place-items-center w-40 h-40 bg-red-300 rounded-lg">
<div class="w-10 h-10 bg-green-300 rounded-full"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们同时给父元素加上 “grid” 和 “place-items-center” 这两个类，这样它内部的子元素就会自动水平居中，并且垂直居中了。
常见问题
1. 为什么我给父元素加上了 grid-cols-3，但它的子元素还是像列表一样垂直排列呢？
大概率是父元素漏写了最基础的 “grid” 类名。如果没有 grid 作为前提，那么 Grid 布局就不会生效，其子元素依然会按照默认的块级元素方式（占满一行）进行排版。
2. Grid 布局和 Flex 布局，到底应该怎么选呢？
小伙伴们记住一个简单的原则：
- Flex 布局：适合用于 “一行” 或者 “一列” 的线性布局（一维）。比如导航栏、按钮组。
- Grid 布局：适合用于 “多行多列” 的矩阵布局（二维）。比如照片墙、复杂的网页大框架。
在实际开发中，应该优先使用 Flex 布局。只有 Flex 布局无法实现或很难实现时，再去考虑使用 Grid 布局。
