各位前端同僚，早上好！今天咱们来聊聊 CSS Grid Layout 里几个比较有意思，也稍微有点深度的属性：grid-template-areas，grid-auto-flow，以及 subgrid。
Grid Layout 绝对是 CSS 布局的一大利器，用好了它，妈妈再也不用担心我的页面布局乱七八糟了。但是，想要真正掌握它，光知道 grid-template-columns 和 grid-template-rows 还不够，还得深入了解这些高级属性，才能让 Grid 发挥出更大的威力。
一、grid-template-areas：指哪打哪的布局神器
咱们先从 grid-template-areas 说起。这玩意儿可以让你用更直观的方式来定义网格区域，就像在地图上划定势力范围一样。
1. 什么是 grid-template-areas？
简单来说，grid-template-areas 允许你给网格中的单元格命名，然后通过这些名字来指定元素应该占据哪些单元格。它定义了一个可视化的网格布局，比直接用行号和列号定位要清晰得多。
2. 语法
grid-template-areas 的语法比较简单，它是一个字符串列表，每个字符串代表一行网格，字符串中的每个单词代表一个网格单元格。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}在这个例子中，我们定义了一个 3×3 的网格。
- 第一行（
"header header header"）表示 header 占据了第一行的所有三个单元格。 - 第二行（
"sidebar main main"）表示 sidebar 占据了第二行的第一个单元格，main 占据了第二行的后两个单元格。 - 第三行（
"footer footer footer"）表示 footer 占据了第三行的所有三个单元格。
关键的一点是，我们需要使用 grid-area 属性来将网格项（grid items）分配到我们使用 grid-template-areas 定义的区域。
3. 示例
下面是一个更完整的例子，包含 HTML 和 CSS：
HTML:
<div class="container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main">Main Content</main>
<footer class="footer">Footer</footer>
</div>CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr; /* 两列：侧边栏和主要内容 */
grid-template-rows: auto 1fr auto; /* 三行：页眉、内容和页脚 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
height: 500px; /* 为了方便观看，设置容器高度 */
}
.header {
grid-area: header;
background-color: #eee;
padding: 10px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #ddd;
padding: 10px;
}
.main {
grid-area: main;
background-color: #ccc;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: #bbb;
padding: 10px;
text-align: center;
}在这个例子中，我们定义了一个两列三行的网格，并通过 grid-template-areas 将 header、sidebar、main 和 footer 分别放置到指定的区域。
4. 注意事项
- 矩形区域：
grid-area定义的区域必须是矩形的，不能是 L 形或者其他不规则的形状。 - 完整的行/列： 每一行必须包含相同数量的单元格，每一列也必须保持一致。
-
点号（
.）： 可以使用点号（.）来表示一个空的网格单元格。例如：grid-template-areas: "header header header" "sidebar main ." "footer footer footer";在这个例子中，第二行的第三个单元格是空的。点号也可以连续使用，例如
...，表示多个连续的空单元格。 - 区域命名： 区域名称必须是有效的 CSS 标识符，也就是说，它们必须以字母、下划线或美元符号开头，并且只能包含字母、数字、下划线、美元符号和连字符。
5. 优点
- 可读性强：
grid-template-areas能够清晰地表达页面的布局结构，易于理解和维护。 - 响应式设计： 可以通过 Media Queries 改变
grid-template-areas的定义，从而实现不同的布局。
二、grid-auto-flow：自动排兵布阵的策略家
接下来，咱们聊聊 grid-auto-flow。这个属性决定了网格中那些没有明确指定位置的元素应该如何排列。
1. 什么是 grid-auto-flow？
当网格项的数量超过了使用 grid-template-columns 和 grid-template-rows 定义的显式网格时，或者有些网格项没有使用 grid-column-start、grid-column-end、grid-row-start 或 grid-row-end 属性指定位置时，grid-auto-flow 就派上用场了。它控制着这些网格项如何自动地放置到网格中。
2. 语法
grid-auto-flow 有四个主要的值：
row(默认值)：按照行优先的顺序自动排列元素。column：按照列优先的顺序自动排列元素。row dense：按照行优先的顺序排列元素，并尝试填充网格中出现的空隙。column dense：按照列优先的顺序排列元素，并尝试填充网格中出现的空隙。
3. 示例
HTML:
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>CSS (row):
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-auto-flow: row; /* 默认值，可以省略 */
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
text-align: center;
}
.item1 {
grid-column: 1 / 3; /* Item 1 占据两列 */
}在这个例子中，我们定义了一个 3×2 的网格。Item 1 使用 grid-column 占据了两列。由于 grid-auto-flow 的默认值是 row，所以 Item 2、Item 3、Item 4、Item 5 和 Item 6 会按照行优先的顺序自动排列。
CSS (column):
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-auto-flow: column;
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
text-align: center;
}
.item1 {
grid-column: 1 / 3; /* Item 1 占据两列 */
}如果我们将 grid-auto-flow 设置为 column，那么 Item 2、Item 3、Item 4、Item 5 和 Item 6 会按照列优先的顺序自动排列。
4. dense 关键字
dense 关键字告诉 Grid 布局引擎，如果网格中出现了空隙，就尝试将后面的元素填充到这些空隙中，即使这意味着元素的顺序可能会被打乱。
CSS (row dense):
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-auto-flow: row dense;
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
text-align: center;
}
.item1 {
grid-column: 1 / 3; /* Item 1 占据两列 */
}在这个例子中，由于 Item 1 占据了两列，导致第一行出现了一个空隙。如果使用 grid-auto-flow: row dense，Grid 布局引擎会尝试将后面的元素（例如 Item 2）填充到这个空隙中，从而减少网格中的空隙。请注意，这可能会改变元素的显示顺序。
5. 使用场景
- 不确定元素数量： 当你不知道网格中有多少个元素时，
grid-auto-flow可以帮助你自动排列这些元素。 - 灵活的布局：
grid-auto-flow可以让你创建更灵活的布局，可以根据内容的变化自动调整元素的排列方式。 - 减少空隙：
dense关键字可以帮助你减少网格中的空隙，提高空间的利用率。
6. 注意事项
dense关键字可能会改变元素的显示顺序，因此在使用时需要谨慎考虑。grid-auto-flow主要用于处理那些没有明确指定位置的元素。对于已经明确指定位置的元素，grid-auto-flow不会起作用。
三、subgrid：网格中的网格，布局的套娃
最后，咱们来聊聊 subgrid。这是一个比较新的特性，允许你创建一个嵌套的网格，并且这个嵌套的网格可以继承父网格的行和列。
1. 什么是 subgrid？
subgrid 允许你将一个网格项变成一个网格容器，并且这个网格容器的行和列可以与父网格的行和列对齐。这使得创建复杂的、对齐的布局变得更加容易。
2. 语法
要使用 subgrid，首先需要将一个网格项变成一个网格容器，然后将 grid-template-columns 和 grid-template-rows 设置为 subgrid。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
text-align: center;
}
.item1 {
grid-column: 1 / 4; /* Item 1 占据所有列 */
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
gap: 5px; /* 子网格的间距 */
}在这个例子中，.item1 占据了父网格的所有列，并且它本身也是一个网格容器。grid-template-columns: subgrid 和 grid-template-rows: subgrid 告诉浏览器，.item1 的行和列应该与父网格的行和列对齐。
3. 示例
HTML:
<div class="container">
<div class="item item1">
<div class="sub-item">Sub Item 1</div>
<div class="sub-item">Sub Item 2</div>
<div class="sub-item">Sub Item 3</div>
<div class="sub-item">Sub Item 4</div>
<div class="sub-item">Sub Item 5</div>
<div class="sub-item">Sub Item 6</div>
</div>
<div class="item item2">Item 2</div>
</div>CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
text-align: center;
}
.item1 {
grid-column: 1 / 4; /* Item 1 占据所有列 */
grid-row: 1 / 3; /* Item 1 占据两行 */
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
gap: 5px; /* 子网格的间距 */
}
.sub-item {
background-color: #ccc;
padding: 5px;
text-align: center;
}在这个例子中，.item1 占据了父网格的所有列和前两行，并且它本身也是一个网格容器。.item1 的行和列与父网格的行和列对齐，因此子网格中的元素会按照父网格的行和列进行排列。
4. grid-template-columns: subgrid 的高级用法
grid-template-columns: subgrid 可以接受一个可选的轨道列表，用于指定子网格应该使用父网格的哪些轨道。例如：
.item1 {
grid-column: 1 / 4;
display: grid;
grid-template-columns: subgrid [col1] [col2] [col3]; /* 指定子网格的列名 */
grid-template-rows: subgrid;
gap: 5px;
}
.sub-item:nth-child(1) {
grid-column: col1;
}
.sub-item:nth-child(2) {
grid-column: col2;
}
.sub-item:nth-child(3) {
grid-column: col3;
}在这个例子中，我们给子网格的每一列都指定了一个名称（col1、col2、col3），然后可以使用这些名称来定位子网格中的元素。
5. 使用场景
- 复杂的布局对齐： 当你需要创建一个复杂的、对齐的布局时，
subgrid可以帮助你轻松地实现。 - 组件化：
subgrid可以让你创建可复用的组件，这些组件可以与父网格的布局对齐。 - 表单布局：
subgrid非常适合用于创建复杂的表单布局，可以确保表单元素与标签对齐。
6. 注意事项
- 兼容性：
subgrid是一个相对较新的特性，并非所有浏览器都支持。在使用时需要注意兼容性问题。 - 复杂性：
subgrid可能会增加布局的复杂性，因此在使用时需要仔细考虑。
总结
今天咱们聊了 CSS Grid Layout 的三个高级属性：grid-template-areas、grid-auto-flow 和 subgrid。
grid-template-areas让你用更直观的方式定义网格区域，提高代码的可读性。grid-auto-flow帮你自动排列网格中的元素，让布局更加灵活。subgrid让你创建嵌套的网格，轻松实现复杂的布局对齐。
掌握了这些属性，你的 Grid Layout 技能肯定能更上一层楼。当然，熟能生巧，多写代码，多实践，才能真正理解这些属性的用法和适用场景。
希望今天的分享对大家有所帮助！谢谢大家！