24 网格列起始、结束与跨度
水平表单 示例 24a
使用网格布局来创建表单并使其具备响应式，比使用其他任何工具都要容易得多。这是一个最简单的水平表单示例，标签在左侧，输入框在右侧，按钮也在右侧。凭借目前所学的网格知识，你肯定能够创建这个组件。 
我们可以使用grid - cols - [auto,1fr]来按要求创建两列。但是由于“创建账户”按钮是标记中的第 5 个元素，它会出现在第一列。那么我们如何让它显示在第二列呢？
标记
<form class="grid grid-cols-[auto,1fr] items-center gap-y-6 gap-x-12">
<label></label>
<input ... />
<label></label>
<input ... />
<button>Create Account</button>
</form>解决方案
当然，一种解决方案是在 HTML 中按钮之前添加一个虚拟元素，但这显然不是一个好的做法。针对这种情况，有一个简单的实用类可以使用：
<form class="...">
<button class="col-start-2 ...">Create Account</button>
</form>我们在网格项上使用了col-start-2来更改它所在的列。让我们来了解一下这个属性。
理解 Column Start 概念
在深入学习col-start-*实用类之前，我们需要先了解网格线。当你使用grid-cols-*和 / 或grid-rows-*定义一个网格时，就会创建网格线。这些网格线就是列与列、行与行之间以及周围的线条。这张图解释了列线和行线是如何编号的。
需要记住的是，线的编号从 1 开始，而不是 0。
到目前为止我们看到的所有与网格相关的实用类都是应用在网格容器上的。现在，我们将看到一些应用在网格项上的实用类。col-start-*就是其中之一，它用于指定项的起始位置。一些可用的 Tailwind 实用类如下：
| Tailwind 类 | CSS 属性及值 | 解释 |
|---|---|---|
| col-start-1 | grid-column-start: 1; | 该项从列线 1 开始 |
| col-start-2 | grid-column-start: 2; | 该项从列线 2 开始 |
这类实用类一直到col-start-13都可用。
在 CSS 中，你也可以使用负值，比如grid-column-start: -1。这里的 -1 指定的是最后一列线。当使用负整数时，它会从 -1 开始反向计数。
在上面的例子中，我们使用col-start-2是因为我们希望按钮从列线 2 开始。现在注意，如果你使用col-start-3，它会创建一个新列，所有内容就会混乱。因此在使用这个实用类时你需要格外小心。 141
单价格网格组件 示例 24b
来自 Frontend Mentor 的挑战。
这个网格组件是 Frontend Mentor 网站上的一个挑战。它是响应式的，在移动版本中只有一列，所有三个项目一个接一个地排列。然而，桌面版本有两列，但第一个项目横跨两列。
对于较小的屏幕，无需进行任何操作。对于较大的屏幕，你可以使用我们刚刚学到的col-start-*实用类以及col-end-*，让第一个项目跨列显示。
标记
<div class="container grid sm:grid-cols-2">
<div class="component-header">...</div>
<div class="subscription">...</div>
<div class="why">...</div>
</div>解决方案
在 sm 断点以上，我们需要让 .component-header 从列线 1 开始并在列线 3 结束。
<div class="container grid sm:grid-cols-2">
<div class="component-header sm:col-start-1 sm:col-end-3">...</div>
<div class="subscription">...</div>
</div>让我们了解 col-end-* 工具类以及实现相同效果的其他方法。
理解列结束（Column End） 概念
col-end-* 工具类是另一组网格项目的实用工具，用于指定项目的结束位置。Tailwind 中提供的相关工具类与 col-start-* 类似。在 CSS 中，grid-column-end 允许使用负整数，此时会从 -1 开始反向计数列线。
在上述示例中，我们使用 col-end-3 是因为希望该项目在列线 3 结束。你也可以使用任意值 col-end-[-1]。
我们还可以使用另一组工具类 col-span-*，用于指定项目跨越的列数。它通常与 col-start-* 或 col-end-* 结合使用。
因此，上述示例的另一种解决方案可以是：
<div class="component-header sm:col-start-1 sm:col-span-2">...</div>这表示从列线 1 开始并跨越 2 列。当你知道起始位置和需要跨越的列数，但不想计算结束线时，这种方法非常有用。
你也可以省略这里的 col-start-1：
<div class="component-header sm:col-span-2">...</div>因为起始列线默认是 1。
甚至可以：
<div class="component-header sm:col-span-full">...</div>或：
<div class="component-header sm:col-span-2 sm:col-end-3">...</div>这意味着通过跨越 2 列来在列线 3 结束。当你知道结束位置和需要跨越的列数，但不想计算起始线时，这同样有用。别忘了在前面的两个示例中尝试所有这些方法。
理解列跨度 Column Span 概念
col-span-* 实用工具类可用于网格项，以指定跨越多少列。它通常与 col-start-* 或 col-end-* 一起使用。但如果单独使用，将采用默认的起始和结束线。Tailwind 中可用的实用工具类从 col-span-1 到 col-span-12 不等，还有一个很有用的 col-span-full，它能让网格项跨越网格中的所有列。
使用网格进行页面布局 示例 24c
我们已经了解了如何使用网格实现带有侧边栏和粘性页脚的布局，这是使用网格创建完整页面布局的最简单示例。现在让我们来看另一种布局，它将上述两种布局与页眉、侧边栏、主要内容和页脚结合在一起。
这是一个有 2 列 3 行的网格布局。页眉和页脚跨越两列。
标记
<div class="container min-h-screen">
<header>...</header>
<div class="sidebar">...</div>
<div class="main">...</div>
<footer>...</footer>
</div>解决方案
我们需要做三件事：
- 我们有一个固定宽度的侧边栏，所以
grid-cols-*将有一个固定宽度值和1fr。 - 我们必须使用
grid-rows-*来控制行的大小，因为我们需要页眉和页脚只占据其中内容的高度，所以页眉和页脚使用auto。并且我们希望中间一行占据尽可能多的高度，所以使用1fr。 - 对于页眉和页脚，我们使用
col-span-*实用工具类来跨越两列。
<div class="container min-h-screen grid grid-cols-[22rem,1fr] grid-rows-[auto,1fr,auto]">
<header class="col-span-full">...</header>
<footer class="col-span-full">...</footer>
</div>