具有ASCII艺术的网格模板区域不起作用

具有ASCII艺术的网格模板区域不起作用

当使用带有该

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-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 >  <div >Header</div>  <div >Sidebar</div>  <div >Content</div></div>

---

还 请注意，的所有字符串值

grid-template-areas

必须具有相同的列数