使用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>

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>

另请注意,所有字符串值grid-template-areas必须具有相同的列数.有关详细信息,请参阅此帖子:

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