When
grid-template-areas:
"....... header header"
"sidebar content content";
更改为：
grid-template-areas:
"....... header header"
"sidebar header content";
一切都分崩离析。
如何使用 CSS 网格布局实现相同的效果？
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas: "....... header header" "sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>https://codepen.io/rachelandrew/pen/oXKgoQ
当涉及到将 ASCII 艺术与grid-template-areas属性一起使用时，当前存在一个重要的限制：命名网格区域必须是矩形的。
换句话说，不允许使用同名的俄罗斯方块形状的网格区域。
此行为在规范的两个部分中定义。
7.3. 命名区域：
the grid-template-areas财产如果命名网格区域跨越多个网格单元格，但这些单元格不跨越 形成单个填充矩形，声明无效。
非矩形或断开连接的区域可能允许在 此模块的未来版本。
9. 放置网格 项目
每个网格项都有一个网格区域，一组矩形网格单元格 网格项占用。
在第一个示例中，所有网格区域都形成矩形。所以规则是有效的。
grid-template-areas:
"....... header header"
"sidebar content content";
在第二个示例中，header区域形成非矩形形状。所以规则是无效的。
grid-template-areas:
"....... header header"
"sidebar header content";
(请注意，一个周期(.(或一系列连接的周期(...(形成一个未命名的网格区域，上述规则不适用(规范参考(。
幸运的是，Grid 提供了多种方法来布置网格项。
您可以使用基于行的放置代替grid-template-areas。
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-auto-rows: 100px;
background-color: #fff;
color: #444;
}
.header {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
body {
margin: 40px;
}<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>另外，请注意，grid-template-areas的所有字符串值必须具有相同数量的列。有关更多详细信息，请参阅此帖子：
- 网格区域在 CSS 网格中布局不正确