css - 网格项不尊重网格模板区域中的点表示法

Question

根据CSS Tricks对于grid-template-areas，如果我为列指定一个点，则该空间不会被占用。

根据my fiddle ，它将元素 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 作为网格区域名称。当跨越多个网格线时，会使用“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 最初占用第一个点(.)的空间的原因是 span.showy 的 grid-area: span; 是未被识别，因此它在网格上没有位置。在这种情况下，它将占用第一个可用空间，即第一个点(.)。点符号根本没有任何问题。

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

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