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

Question

什么时候

grid-template-areas:
       "....... header  header"
       "sidebar content content";

更改为：

grid-template-areas:
       "....... header  header"
       "sidebar header content";

一切都崩溃了。

如何使用CSS Grid布局实现相同的效果？

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>

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-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必须具有相同的列数