17 网格模板行
使用网格实现粘性页脚 示例 17a
我们已经了解了如何使用 Flex 来创建粘性页脚(footer)。这里有一个类似的示例，不过额外添加了一个页眉元素(header)。如果还记得的话，我们之前是使用flex-col和flex-grow来实现这一效果的。
如果你能猜到实现方法，不妨用网格来试试这个效果。
标记代码
html
<div class="container min-h-screen">
<header>...</header>
<div class="main">...</div>
<footer>...</footer>
</div>解决方案
观察示例，会发现布局是单列多行的。可以使用grid-rows-*属性，而不是grid-cols-*属性来设置。我们需要 3 行：第一行和第三行高度自适应，第二行占据剩余所有高度。
html
<div class="container min-h-screen grid grid-rows-[auto,1fr,auto]">...</div>**注意：**该示例仅在只有header、footer和.main这三个元素时有效。如果在同一层级添加额外元素，布局会出错。若要添加内容，需将其添加到.main div 内部。
理解网格模板行（Grid Template Rows）概念
CSS 中的grid-template-rows属性用于指定所需的行数以及每行的大小。与grid-template-columns类似，行高可以用百分比（%）、像素（px）、相对长度单位（rem）或任何有效的高度值表示，值之间用空格分隔。指定的值的数量决定了创建的行数。
在之前的所有示例中，即使不使用这个属性，也能得到多行布局。这就是网格布局的工作方式，它会自动创建行来容纳额外的项目，这被称为隐式网格。同样，在上述示例中，会自动创建一列，默认占据全部宽度。稍后我们会探讨隐式网格及其尺寸设置。
在上述示例中，由于需要不同高度的行，所以使用了自定义值。但如果需要等高的行，Tailwind 中有grid-rows-*实用类可以实现。
| Tailwind 类 | 说明 |
|---|---|
| grid-rows-1 | 创建一个占据容器全部高度的网格行 |
| grid-rows-2 | 创建两个各占 50%高度的网格行 |
| grid-rows-3 | 创建三个各占 33.33%高度的网格行 |
在介绍更多概念后，我们还会看更多使用grid-rows-*的示例。现在，相信你已经有了基本的了解。当然，grid-col-*和grid-rows-*可以同时使用。