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作为网格区域名称。跨多条网格线时会使用“跨度”一词，因此会混淆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的{{1}}无法识别，因此在网格上没有位置。在这种情况下，它将占用第一个可用空间，即第一个点（。）。点符号根本没有错。

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

grid-area

Answer 2

如another answer中所述，问题在于使用名称“ span”作为// basic (exact matching) ------------------- | Input | Result | ------------------- | Jacob | 1, 2 | Both 1 and 2 has Jacob in Name ------------------- | Mike | 3 | Only 3 has Mike in Name ------------------- // extended (any contains) ------------------- | Input | Result | ------------------- | j, m | 1, 2 | 1: james (both "j" and "m"), 2: jacob, michael ------------------- | m | 1, 2, 3 | All persons have name containing "m" ------------------- | mi | 2, 3 | 2: michael, 3: mike -------------------值。

当您为grid-area定义自己的名称时，您使用的是规范称为<custom-ident>（自定义标识符）的名称。 Grid中的预定义关键字（例如“ span”）和CSS范围的关键字（例如“ inherit”）不是有效的自定义标识符。

§ 3.2. Author-defined Identifiers: the <custom-ident> type

某些属性接受任意作者定义的标识符作为   组件值。此通用数据类型由表示   grid-area，代表任何有效的CSS标识符，   不会被误认为该媒体资源中的预定义关键字   值定义。此类标识符完全区分大小写，即使在   ASCII范围（例如“ example”和“ EXAMPLE”是两个互不相关的   用户定义的标识符）。

CSS级关键字无效<custom-ident>。默认值   关键字是保留的，也不是有效的<custom-ident>。   使用<custom-ident>的规范必须明确指定其他   <custom-ident>中排除了关键字（如果有的话），例如   表示该属性值中的所有预定义关键字   定义不包括在内。排除的关键字被排除在所有ASCII中   大小写排列。

注意：使用<custom-ident>设计语法时，<custom-ident>   应该始终“在位置上明确”，这样就不可能   与该属性中的任何关键字值冲突。

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

2 个答案: