当使用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";

(Note一个周期（.）或一系列相连的周期（...）形成一个 * 未命名 * 网格区域，上面的规则不适用于此（规范参考）。
幸运的是，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的所有字符串值必须具有相同的列数。更多详情请看这篇文章：

• Grid areas not laying out properly in CSS Grid

在网格模板区域中，您需要了解一些规则，以了解为什么它不工作。
1.每个单元格都需要被覆盖意味着网格中的每个单元格都应该被分配一个名称。即使它是空的，就像这样：
“....... header header”。
1.可以在相邻的行和列中使用相同的名称。像这样：：
“....... header header”“sidebar content content”;
在这里，我们可以清楚地看到标题被使用了两次，但它们是在相邻列中使用的。而且内容也被使用了两次，这也是在相邻的列。你也可以使用它，但它应该相邻。
但如果不相邻，则不能使用相同的名称。就像这样：
“....... header header”“sidebar header content”;
1.它应该是长方形的。这意味着网格中每行的列应该相同。