如何移除CSS Grid中height为0的空元素对应的gap间距

解决方案 #

产生多余空白的核心原因是：CSS Grid的gap是作用在网格轨道之间的间距，只要空div仍然作为网格项存在，哪怕高度设为0，对应的网格轨道也会保留，gap自然会生效。

你可以用CSS :empty伪类实现需求，代码如下：

/* 空状态下隐藏该网格项，自动移除对应的网格轨道和关联gap */
.grid-element--3:empty {
  display: none;
}

效果说明

• 当grid-element--3为空时，display: none会让它脱离网格布局，不会生成对应轨道，自然不会产生多余gap
• 当你通过JS向该元素插入内容后，:empty伪类自动失效，元素恢复为正常网格项，前后的gap会自动生效，不需要额外修改JS逻辑

注意事项

:empty伪类的判定规则非常严格，元素内部存在任何空格、换行、文本节点都会被判定为非空，所以预留空div时要严格写成闭合标签中间无任何内容：

<div class="grid-element--3"></div>

如果无法避免预留时内部有空格/换行，可以改用类名控制的方案，兼容性更可控：

1. 初始给空元素加is-empty类

<div class="grid-element--3 is-empty"></div>

2. 对应CSS样式：

.grid-element--3.is-empty {
  display: none;
}

3. JS插入内容时同步移除is-empty类即可

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