为什么我的带有 ASCII 艺术的网格模板区域不起作用？

Question

什么时候

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

Answer 1

当涉及到使用具有

grid-template-areas

属性的 ASCII 艺术时，当前有一个重要的限制：命名的网格区域必须是矩形。

换句话说，不允许存在同名的俄罗斯方块形状的网格区域。

此行为在规范的两个部分中定义。

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>

---

ALSO，请注意

grid-template-areas

的所有字符串值必须具有相同的列数。更多详情请参阅这篇文章：

• CSS 网格中网格区域未正确布局

Answer 2

在网格模板区域中，您需要了解一些规则才能理解它不起作用的原因。

1. 每个单元格都需要被覆盖意味着网格中的每个单元格都应该被分配一个名称。即使像这样空着：

“......标题标题”。

2. 您可以在相邻的行和列中使用相同的名称。像这样::
   “......标题标题” “侧边栏内容内容”；

在这里我们可以清楚地看到标题被使用了两次，但它们被用在相邻的列中。而且内容也使用了两次，也在相邻的列中。您也可以将它用于行，但它应该是相邻的。

但是当名称不相邻时不能使用相同的名称。像这样：

“......标题标题” “侧边栏标题内容”；

3. 它应该是矩形的。这意味着每行网格内的列应该相同。