为什么我的带有 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. Named Areas: the grid-template-areas property

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Non-rectangular or disconnected regions may be permitted in a future version of this module.

9. Placing Grid Items

Every grid item has a grid area, a rectangular set of grid cells that the grid item occupies.

在您的第一个示例中，所有网格区域都形成矩形。所以规则是有效的。

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

在您的第二个示例中，header 区域形成了一个非矩形形状。所以规则无效。

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

（请注意，一个句点（.）或一系列相连的句点（...）形成一个未命名网格区域，上面的规则不适用 (spec reference).)

幸运的是，Grid 提供了多种布局网格项的方法。

代替grid-template-areas，您可以使用line-based placement。

.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 的所有字符串值必须具有相同的列数。有关详细信息，请参阅此 post：

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

Why aren't my grid-template-areas with ASCII art not working?

css

ascii

css-grid