Css 为什么不'；我的网格模板区域是否有ASCII艺术不起作用？

什么时候

网格模板区域：
“……标题”
“侧边栏内容”；

更改为：

网格模板区域：
“……标题”
“边栏标题内容”；

一切都崩溃了

如何使用CSS网格布局实现相同的效果

正文{
利润率：40像素；
}
.侧边栏{
网格区域：侧栏；
}
.内容{
网格区域：内容；
}
.标题{
网格区域：标题；
}
.包装纸{
显示：网格；
栅隙：10px；
网格模板列：120px 120px 120px；
网格模板区域：“……标题”“侧栏内容”；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.标题{
背景色：#999；
}

标题
边栏
内容

当涉及到将ASCII艺术与属性一起使用时，目前存在一个重要的限制：命名网格区域必须为矩形

换句话说，相同名称的俄罗斯方块形状的网格区域是不允许的

此行为在规范的两个部分中定义

如果命名栅格区域跨多个栅格单元，但这些单元不跨 从单个填充矩形中，声明无效

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

非矩形或断开连接的区域可以在 本模块的未来版本

每个网格项都有一个网格区域，一组矩形网格单元 网格项占用了所有的空间

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

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

在第二个示例中，

标题

区域形成非矩形形状。所以这个规则是无效的

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

（请注意，一个句点（

）或一系列连接的句点（

…

）形成一个未命名的网格区域，上述规则不适用于该区域（）

---

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

您可以使用，而不是

网格模板区域

.wrapper{
显示：网格；
栅隙：10px；
网格模板列：120px 120px 120px；
网格自动行：100px；
背景色：#fff；
颜色：#444；
}
.标题{
网格柱：2/4；
网格行：1/3；
}
.侧边栏{
网格柱：1/2；
网格行：2/3；
}
.内容{
网格柱：3/4；
网格行：2/3；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.标题{
背景色：#999；
}
身体{
利润率：40像素；
}

标题
边栏
内容