网格项目不遵守网格模板区域中的点符号

Question

根据CSS Tricks for grid-template-areas的介绍，如果我为列指定点，则不会占用空间。

根据我的小提琴，它将C替换为点。

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

div.outer > div.texty { grid-area: text; }

div.outer > div.checky { grid-area: check; }

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

div.outer > div.butty { grid-area: button; }

<div class="outer">
  <div class="texty">A</div>
  <div class="checky">B</div>
  <span class="showy">C</span>
  <div class="butty">D</div>
</div>

Answer 1

问题在于使用单词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的grid-area: span;不认可，因此并没有对电网的地方。在这种情况下，它将占用第一个可用空间，即第一个点（。）。点符号根本没有错。

编辑2：中
的跨度用法示例grid-area，取自W3Schools。
使“ item1”从第2行第1列开始，并跨度2行和3列：

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