如何在不显式指定元素位置时空出CSS Grid指定单元格？

需求与疑问 #

需求 #

让.icon类元素在第一行内垂直居中对齐，同时空出第二行第一列的单元格。

疑问 #

1. 是否可以在不显式指定.third类元素grid-column属性的情况下实现该效果？
2. 无法为.icon设置grid-row: span 2（否则元素会跨两行居中），该如何处理？
3. 能否在声明grid-template时直接跳过指定单元格？

解决方案与解答 #

疑问解答 #

1. 完全可以：用CSS Grid的grid-template-areas语法，不用给.third写grid-column也能实现。
2. 别用跨两行的写法：让.icon只占第一行的单元格，用align-self: center就能让它在第一行里垂直居中，这样就不会出现跨两行的问题。
3. 当然支持：在grid-template-areas里用.就能直接跳过指定单元格，不用额外加HTML元素。

代码实现 #

通过grid-template-areas定义网格布局，明确指定.icon的位置，同时用.预留空单元格，剩余元素会自动按顺序填充到对应区域：

div {
  border: 1px solid red;
}

.grid {
  display: inline-grid;
  grid-template-columns: min-content 200px 200px;
  grid-template-rows: 50px 50px;
  /* 定义网格区域，.代表空出的第二行第一列单元格 */
  grid-template-areas:
    "icon field1 field2"
    ". field3 field4";
}

.icon {
  grid-area: icon;
  align-self: center; /* 仅在第一行内垂直居中 */
}

<div class="grid">
  <div class="icon">
    Icon
  </div>
  <div>
    First field
  </div>
  <div>
    Second field
  </div>
  <div>
    Third field
  </div>
  <div>
    Fourth field
  </div>
</div>

原理说明 #

• grid-template-areas通过字符串直观定义网格布局，icon对应.icon元素的位置，.表示该单元格不被任何元素占用（即空出第二行第一列）。
• 未指定grid-area的子元素会按照HTML顺序自动填充到grid-template-areas中剩余的命名区域，无需额外设置grid-column。
• align-self: center仅作用于.icon所在的第一行单元格，实现该行内的垂直居中，不会跨两行。

内容的提问来源于stack exchange，提问作者Andyally