网格-模板-使用ASCII技术的区域无法工作。

Question

网格-模板-使用ASCII技术的区域无法工作。什么时候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

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

(请注意一段期间(.)或一系列连接周期(...)形成无名上述规则不适用的网格区域(规范参考).)

---

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

而不是grid-template-areas，你可以用线基布置.

Show code snippet

---

也的所有字符串值。grid-template-areas必须有相同数目的列。有关详细信息，请参阅此帖子：

• CSS网格中网格区域布局不正确