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

问题在于使用单词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;
}