网格-模板-使用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网格中网格区域布局不正确