Css 网格项不存在'；不尊重网格模板区域中的点符号

根据网格模板区域，如果我为列指定一个点，空间将不会被占用

根据，它把C项放在点的位置

div.outer{
显示：网格；
网格模板柱：40%30%10%20%；
网格模板行：50%50%；
网格模板区域：“文本文本.按钮”“检查跨度.按钮”；
}
div.outer>div.texty{网格区域：text；}
div.outer>div.checky{网格区域：检查；}
div.outer>span{网格区域：span；}
div.outer>div.butty{网格区域：按钮；}

A.
B
C
D

问题在于使用

span

作为网格区域名称。在跨越多个网格线时使用span这个词，因此会混淆css解析器

div.outer {
  display: grid;
  grid-template-columns: 40% 30% 10% 20%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "text text . button"
    "check show . button";
}

div.outer>span { grid-area: show; }

编辑1:
此外，跨度最初占据第一个点（.）的空间的原因是

span.showy

的

网格区域：span未被识别，因此它在网格上没有位置。在这种情况下，它将占用第一个可用空间，即第一个点（.）。点符号一点问题也没有

编辑2:

网格区域中跨距使用的示例取自

使“item1”从第2行第1列开始，并跨越2行和3列：

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

如中所述，问题是使用名称“span”作为
网格区域
值

当您为
网格区域定义自己的名称时，您使用的是规范所称的（自定义标识符）。网格中预定义的关键字（如“span”）和CSS范围的关键字（如“inherit”）不是有效的自定义标识符


某些属性接受任意作者定义的标识符作为
组件值。此通用数据类型由
，并表示将
在该属性的
值定义。这种标识符完全区分大小写，即使在
ASCII范围（例如，“示例”和“示例”是两个不同的、不相关的
用户定义的标识符）

CSS范围的关键字无效。默认值
关键字是保留的，也是无效的
。
使用
的规范必须明确说明其他
关键字被排除在
之外（如果有），例如
表示该属性值中的任何预定义关键字
定义被排除在外。排除的关键字在所有ASCII中都被排除
案例排列

注意：使用
设计语法时，

应该总是“位置明确”，这样就不可能了
与属性中的任何关键字值冲突

我感觉到这是件愚蠢的事。。。虽然问题已解决，答案已被接受，但我想知道您是否可以详细说明在网格区域和字符串声明模板区域的上下文中，span将被解释为什么。我理解事实上发生了碰撞，我并不反驳这一说法。我只是没有意识到它是以什么方式发生冲突的。哈哈哈，你在写详细说明，而我在写请求。在我问你之前三秒钟你就发了。给人印象深刻的哦，但我所阐述的并不是你真正想问的。只是时间上的巧合，哈哈。我找到了一个例子并编辑了答案，以回答您的第一个评论。