网格模板区 | CSS Grid Layout: Grid Template Areas (Grid Layout) - CSS 中文开发手册 - Break易站
网格模板区 | CSS Grid Layout: Grid Template Areas (Grid Layout) - CSS 中文开发手册
在前指南我们研究了网格线，以及如何在这些行中定位项目。当您使用CSSGrid布局时，您总是有行的，这可以是一种简单的将项放置在网格中的方法。但是，有一种替代方法可用于在网格上定位项目，可以单独使用，也可以与基于行的放置结合使用。此方法涉及使用命名模板区域放置项，我们将确切地了解该方法是如何工作的。您将很快看到为什么我们有时称之为网格布局%21的ascii-art方法。
命名网格区域
您已经遇到了grid-area。这是一个属性，它可以将用于定位网格区域的所有四条线作为值。
.box1 {
grid-area: 1 / 1 / 4 / 2;
} 在定义所有四条线时，我们要做的是通过指定包围该区域的线来定义区域。
我们也可以定义一个区域，方法是给它一个名称，然后在grid-template-areas财产。你可以选择你想要给你的区域命名的东西。例如，如果我希望创建如下所示的布局，我可以确定四个主要区域。
标题脚侧边栏主要内容
带着grid-area属性可以为这些区域中的每一个指定名称。这还不会创建任何布局，但我们现在已经指定了要在布局中使用的区域。
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
} 定义了这些名称之后，我就创建了我的布局。这一次，我没有使用项目本身指定的行号来放置项目，而是在网格容器上创建整个布局。
.wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
"ft ft ft ft ft ft ft ft ft";
} <div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div> 使用这种方法，我们不需要在单个网格物品上指定任何东西，所有事情都发生在我们的网格物品容器上。我们可以将布局描述为grid-template-areas属性的值。
将网格单元留空
在这个例子中，我们已经完全填充了我们的网格，没有留下空白区域。但是，您可以使用此布局方法将网格单元留空。要将单元格留空，请使用句号“ .'。如果我只想直接在主要内容下显示页脚，则需要将侧栏下方的三个单元格留空。
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
} .wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
". . . ft ft ft ft ft ft";
} <div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div> 为了使布局更整洁，我可以使用多个.字符。只要之间没有空白，它就会被计为一个单元格。对于复杂的布局，将行和列整齐排列是有好处的。这意味着你可以在CSS中看到这个布局的样子。
跨越多个单元格
在我们的例子中，每个区域跨越多个网格单元格，我们通过多次重复该网格区域的名称来实现这一点，其间具有空白区域。您可以添加额外的空白，以保持您的列排列整齐的值grid-template-areas。你可以看到，我已经这样做了，hd并ft和main。
通过链接区域名称创建的区域必须是矩形的，此时无法创建L形区域。规范确实注意到未来的级别可能会提供此功能。但是，您可以像列一样容易地跨行。例如，我们可以让我们的侧边栏通过更换跨越到页脚的末尾.用sd。
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
} .wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
"sd sd sd ft ft ft ft ft ft";
} grid-template-areas的值必须显示一个完整的网格, 否则它是无效的 (并且该属性被忽略)。这意味着每行的单元格数必须相同, 如果为空, 则显示一个完全停止字符, 表明该单元格将留空。如果您的区域不是矩形的, 也将创建无效的网格。
