使用 Tailwind 的网格工具构建复杂且灵活的布局

探索 Tailwind 的网格工具类

以下是我们在布局中将使用的网格工具类的快速概览。

要定义列和行，我们将使用以下类名（其中 n 表示列或行的数量）：

• grid-cols-{n}：定义列数
• grid-rows-{n}：定义行数

要在列和/或行之间添加间距，可以使用以下类名：

• gap-{size}：同时设置列与行之间的间距
• gap-x-{size}：设置列之间的间距
• gap-y-{size}：设置行之间的间距

为了创建复杂的布局，我们还需要以下类名：

• col-span-{n}：使元素跨越 n 列
• col-start-{n}：使元素从第 n 条网格线开始
• col-end-{n}：使元素在第 n 条网格线结束
• row-span-{n}：使元素跨越 n 行
• row-start-{n}：使元素从第 n 条网格线开始
• row-end-{n}：使元素在第 n 条网格线结束

网格线编号规则

CSS 网格线从 1 开始编号，而不是 0。因此，在一个四列三行的网格中，列从第 1 条网格线开始，到第 5 条网格线结束；行从第 1 条网格线开始，到第 4 条网格线结束——如下图所示。

我们还可以使用 order-{order} 来改变网格项在页面中的显示顺序，使其不同于其在 DOM（文档对象模型） 中的原始顺序。

借助上述工具类，我们可以创造出无限多种不同复杂程度的布局。

使用 HTML 文件配置 Tailwind

为了跟随本教程，我们已创建了一个新项目，方式与之前相同。

接下来，我们需要修改 tailwind.config.js 文件中的 content 配置，以让 Tailwind 识别所有 HTML 文件：

1// /tailwind.config.js
2module.exports = {
3  content: ['*.html'],
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8}

最后，通过运行以下命令来构建样式：

1npm run dev:watch