Tailwind CSS 网格完整参考

Tailwind CSS 是一个优秀的 CSS 框架，其中最强大的特性之一是它的网格系统。Tailwind CSS 提供了许多可用于构建网格布局的类，使得布局变得非常容易，甚至无需使用其他的 CSS 样式表或者 JavaScript 库。在这篇文章中，我们将会介绍 Tailwind CSS 网格系统的所有可用类，以及如何使用它们来构建任何类型的网格布局。

简介

Tailwind CSS 网格系统提供了两个组成部分，即网格容器和网格项。网格容器（Grid Container）是一个包含网格项（Grid Items）的父元素，而网格项则是直接包含在网格容器中的子元素。网格容器将其子元素放置在一个网格中，该网格可以是任意数量的行和列组成的，且它们的大小由各自的子元素决定。

网格容器

要创建一个网格容器，我们可以使用以下的 Tailwind CSS 类：

• grid：将一个元素设置为网格容器。
• grid-cols-{n}：将网格划分成 n 列。
• grid-rows-{n}：将网格划分成 n 行。
• grid-flow-row：将网格中的网格项按顺序排列，从左到右，从上到下。
• grid-flow-col：将网格中的网格项按顺序排列，从上到下，从左到右。
• grid-flow-row-dense：类似于 grid-flow-row，但是会尝试填充空白单元格。
• grid-flow-col-dense：类似于 grid-flow-col，但是会尝试填充空白单元格。
• grid-cols-auto：将网格中的每一列宽度设置为其内容宽度的最大值。
• grid-cols-min：将网格中的每一列宽度设置为其内容宽度的最小值。
• grid-cols-max：将网格中的每一列宽度设置为其内容宽度的最大值。
• grid-rows-auto：将网格中的每一行高度设置为其内容高度的最大值。
• grid-rows-min：将网格中的每一行高度设置为其内容高度的最小值。
• grid-rows-max：将网格中的每一行高度设置为其内容高度的最大值。

例如，要创建一个具有 2 列、 3 行的网格容器，可以添加以下 CSS 类：

<div class="grid grid-cols-2 grid-rows-3">
  <!-- 网格项 -->
</div>

网格项

Tailwind CSS 提供了许多类来控制网格项的布局和位置。以下是可用的类：

• col-{start}/{end}：指定一个网格项横跨从 start 列到 end 列的位置。
• row-{start}/{end}：指定一个网格项跨越从 start 行到 end 行的位置。
• col-span-{n}：将网格项跨越 n 列。
• row-span-{n}：将网格项跨越 n 行。
• col-start-{n}：将网格项放置在第 n 列。
• row-start-{n}：将网格项放置在第 n 行。
• col-end-{n}：将网格项放置在倒数第 n 列。
• row-end-{n}：将网格项放置在倒数第 n 行。
• justify-self-auto：设置网格项在其网格单元格中的水平对齐方式为自动对齐。
• justify-self-start：设置网格项在其网格单元格中的水平对齐方式为开始对齐。
• justify-self-end：设置网格项在其网格单元格中的水平对齐方式为结束对齐。
• justify-self-center：设置网格项在其网格单元格中的水平对齐方式为居中对齐。
• justify-self-stretch：设置网格项在其网格单元格中的水平对齐方式为拉伸对齐。
• justify-items-auto： 设置网格中所有元素在其网格单元格中的水平对齐方式为自动对齐。
• justify-items-start：设置网格中所有元素在其网格单元格中的水平对齐方式为开始对齐。
• justify-items-end：设置网格中所有元素在其网格单元格中的水平对齐方式为结束对齐。
• justify-items-center：设置网格中所有元素在其网格单元格中的水平对齐方式为居中对齐。
• justify-items-stretch：设置网格中所有元素在其网格单元格中的水平对齐方式为拉伸对齐。
• items-auto：设置网格中所有元素在其网格单元格中的垂直对齐方式为自动对齐。
• items-start：设置网格中所有元素在其网格单元格中的垂直对齐方式为开始对齐。
• items-end：设置网格中所有元素在其网格单元格中的垂直对齐方式为结束对齐。
• items-center：设置网格中所有元素在其网格单元格中的垂直对齐方式为居中对齐。
• items-stretch：设置网格中所有元素在其网格单元格中的垂直对齐方式为拉伸对齐。

例如，要创建一个跨越两列和两行的网格项，可以添加以下 CSS 类：

<div class="col-start-1 col-span-2 row-start-1 row-span-2">
  <!-- ... -->
</div>

附加选项

为了更加灵活地控制网格系统，Tailwind CSS 还包括许多附加选项类：

• gap-{size}：设置所有网格项之间的间距。
• col-gap-{size}：设置网格中所有列之间的间距。
• row-gap-{size}：设置网格中所有行之间的间距。
• auto-cols-{min|max}：为网格容器中自动创建的网格列设置最小或最大值。
• auto-rows-{min|max}：为网格容器中自动创建的网格行设置最小或最大值。
• grid-auto-flow-row：设置网格容器中未明确排列的网格项沿行方向自动排列。
• grid-auto-flow-col：设置网格容器中未明确排列的网格项沿列方向自动排列。

以上都是可用的 Tailwind CSS 类，可以让我们非常快速和方便地创建任意类型的网格布局。它们均可用于 <div> 等元素的类列表中，使您的网站布局更具灵活性和可重用性。

总结

我们已经了解了 Tailwind CSS 网格系统的所有可用类，以及如何使用它们来构建任何类型的网格布局。我们可以使用网格容器和网格项来构建布局，同时使用附加选项类来更好地控制网格的大小和间距。

<div class="grid grid-cols-3 gap-4">
  <div class="col-start-1 col-end-3 row-start-1 row-end-4 bg-gray-300"></div>
  <div class="col-start-3 col-end-4 row-start-1 row-end-4 bg-gray-400"></div>
  <div class="col-start-1 col-end-2 row-start-1 row-end-2 bg-gray-500"></div>
  <div class="col-start-2 col-end-3 row-start-1 row-end-3 bg-gray-600"></div>
  <div class="col-start-1 col-end-3 row-start-3 row-end-4 bg-gray-700"></div>
</div>

以上就是使用 Tailwind CSS 网格系统构建的示例网格布局的 CSS 代码片段。