CSS Grid布局中的 grid-template：布局的魔法师
CSS Grid 布局，这玩意儿，第一次听到是不是觉得高大上？别怕，其实它也没那么难。你可以把它想象成一个魔法师，而 grid-template 就是它手中的魔杖，用来指挥网页上的元素，让它们乖乖地按照你的意愿排列。
今天，我们就来好好聊聊这个 grid-template，看看它到底有什么能耐，能让我们的页面布局变得如此灵活和强大。
什么是 grid-template？
简单来说，grid-template 是 CSS Grid 布局中一个非常重要的属性，它就像一张蓝图，定义了网格的行和列的结构。有了这张蓝图，浏览器才能知道你的页面要分成几行几列，每一行每一列的大小又是多少。
想象一下，你要在一个房间里摆放家具。如果没有事先规划好家具的位置，可能会一团糟。grid-template 就像是这个房间的设计图，让你在放置元素之前，就能清楚地知道每个元素应该放在哪里。
grid-template 实际上是以下三个属性的缩写：
grid-template-rows: 定义网格的行。grid-template-columns: 定义网格的列。grid-template-areas: 定义网格区域的名称，稍后我们会详细介绍。
我们可以单独使用这三个属性，也可以直接使用 grid-template 来一次性定义行、列和区域。
grid-template-rows 和 grid-template-columns：行和列的魔法
这两个属性是 grid-template 的基础，它们决定了你的网格有多少行和列，以及每一行和每一列的大小。
1. 数值定义：最直接的方式
最简单的方式就是使用数值来定义行和列的大小。你可以使用像素 (px)、百分比 (%)、em、rem 等单位。
.grid-container {
display: grid;
grid-template-rows: 100px 200px 150px; /* 定义三行，高度分别为 100px、200px 和 150px */
grid-template-columns: 200px 1fr 200px; /* 定义三列，宽度分别为 200px、剩余空间的 1 倍和 200px */
}在这个例子中，我们定义了一个三行三列的网格。每一行的高度和每一列的宽度都是固定的。注意，这里我们用到了 fr 单位，这是一个非常强大的单位，代表剩余空间。
2. fr 单位：弹性布局的利器
fr 单位是 Grid 布局中非常重要的一个单位，它代表网格容器中剩余空间的一部分。你可以把它想象成一个“弹性因子”，让网格的行和列能够自动适应容器的大小。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 定义三列，宽度比例为 1:2:1 */
}在这个例子中，我们定义了三列，它们的宽度比例为 1:2:1。这意味着第二列的宽度是第一列和第三列的两倍。如果网格容器的宽度发生变化，这三列的宽度也会自动调整，以保持这个比例。
fr 单位的强大之处在于，它可以与其他单位混合使用。例如：
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 200px; /* 定义三列，宽度分别为 100px、剩余空间和 200px */
}在这个例子中，第一列和第三列的宽度是固定的，而第二列则会占据剩余的所有空间。
3. repeat() 函数：简化重复的定义
如果你需要定义很多行或列，而且它们的大小是重复的，那么 repeat() 函数就能派上用场了。它可以让你避免重复编写相同的代码。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 定义三列，每列的宽度都是剩余空间的 1 倍 */
grid-template-rows: repeat(2, 100px); /* 定义两行，每行的高度都是 100px */
}在这个例子中，我们使用 repeat(3, 1fr) 定义了三列，每列的宽度都是剩余空间的 1 倍。同样，我们使用 repeat(2, 100px) 定义了两行，每行的高度都是 100px。
repeat() 函数还可以接受多个值，例如：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px 200px); /* 定义六列，宽度分别为 100px、200px、100px、200px、100px 和 200px */
}在这个例子中，我们使用 repeat(3, 100px 200px) 定义了六列，它们的宽度按照 100px、200px 的顺序重复三次。
4. minmax() 函数：定义最小和最大尺寸
有时候，我们希望网格的行或列能够自动适应内容的大小，但又不想让它们变得太小或太大，这时就可以使用 minmax() 函数来定义最小和最大尺寸。
.grid-container {
display: grid;
grid-template-columns: 100px minmax(200px, 1fr) 100px; /* 定义三列，第一列和第三列的宽度为 100px，第二列的宽度最小为 200px，最大为剩余空间 */
}在这个例子中，我们定义了三列。第一列和第三列的宽度是固定的，为 100px。第二列的宽度最小为 200px，最大为剩余空间。这意味着，如果第二列的内容不足 200px，它的宽度会保持在 200px。如果内容超过 200px，它会扩展到占据剩余的所有空间。
5. auto 关键字：自动调整尺寸
auto 关键字可以让网格的行或列自动调整尺寸，以适应内容的大小。
.grid-container {
display: grid;
grid-template-columns: 100px auto 100px; /* 定义三列，第一列和第三列的宽度为 100px，第二列的宽度自动调整 */
}在这个例子中，第二列的宽度会根据内容自动调整。如果内容很短，第二列的宽度就会很小。如果内容很长，第二列的宽度就会扩展到占据剩余的所有空间。
grid-template-areas：区域的魔法
grid-template-areas 属性是 grid-template 中最有趣也是最强大的部分之一。它可以让你为网格的每个区域命名，然后使用这些名称来放置元素。
想象一下，你要设计一个网站的布局，包括头部、导航栏、内容区域和底部。你可以使用 grid-template-areas 来为这些区域命名，然后将它们放置在网格的相应位置。
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* 定义三列 */
grid-template-rows: 100px auto 50px; /* 定义三行 */
grid-template-areas:
"header header header"
"nav content aside"
"footer footer footer";
}
.header {
grid-area: header;
background-color: lightblue;
}
.nav {
grid-area: nav;
background-color: lightgreen;
}
.content {
grid-area: content;
background-color: lightcoral;
}
.aside {
grid-area: aside;
background-color: lightgoldenrodyellow;
}
.footer {
grid-area: footer;
background-color: lightgray;
}在这个例子中，我们首先使用 grid-template-columns 和 grid-template-rows 定义了一个三行三列的网格。然后，我们使用 grid-template-areas 为每个区域命名：
- 第一行被命名为
header，占据整个第一行。 - 第二行被命名为
nav、content和aside，分别占据第一列、第二列和第三列。 - 第三行被命名为
footer，占据整个第三行。
接下来，我们使用 grid-area 属性将每个元素放置在相应的区域。例如，我们将 header 元素放置在 header 区域，将 nav 元素放置在 nav 区域，以此类推。
grid-template-areas 的注意事项：
- 每个区域的名称必须是有效的 CSS 标识符。
- 每个区域的名称必须用引号括起来。
- 每一行必须有相同数量的单元格。
- 可以使用点号 (
.) 来表示空白区域。
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 100px auto 50px;
grid-template-areas:
"header header header"
"nav content aside"
"footer footer footer";
}在这个例子中，我们使用点号 (.) 来表示第一行的第三个单元格是空白的。
grid-template 的简写形式：一气呵成
正如前面提到的，grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的缩写形式。你可以使用 grid-template 来一次性定义这三个属性。
.grid-container {
display: grid;
grid-template:
"header header header" 100px
"nav content aside" auto
"footer footer footer" 50px
/ 1fr 3fr 1fr;
}在这个例子中，我们使用 grid-template 定义了网格的行、列和区域。注意，行和区域的定义放在斜杠 (/) 的前面，而列的定义放在斜杠的后面。
总结
grid-template 是 CSS Grid 布局中一个非常强大的属性，它可以让你灵活地定义网格的行、列和区域。通过掌握 grid-template，你可以轻松地创建各种复杂的页面布局。
记住，布局就像魔法，grid-template 就是你的魔杖。多练习，多尝试，你也能成为布局大师！
希望这篇文章能帮助你更好地理解 grid-template，并在你的实际项目中发挥它的作用。布局的魔法世界，等你来探索！