如何基于同级元素可见性自动填充CSS Grid空列

这个表现是Grid布局的固定逻辑：只要给子元素指定了显式的固定网格线位置，布局算法就会严格按照你写死的网格线坐标摆放元素，不会因为其他元素被display:none隐藏，就自动重新计算剩余元素的排布位置。
你原来的写法里，给Child2写死了grid-column: 4 / -1，相当于明确要求浏览器必须从第4根网格线的位置开始摆放这个元素，哪怕前面3列已经没有元素占位，它也不会往前移动，自然就留出了3列的空区域。

调整子元素的grid-column写法，把写死的固定起始列号去掉，把位置计算交给Grid的自动流机制，只保留需要的跨列宽度规则，就能实现隐藏状态下的自动适配：

• Child1仅保留跨3列的规则，不指定固定起始位置
• Child2仅保留跨到容器最后一根网格线的规则，起始位置交给自动流自动匹配

调整后的完整代码：

.box {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5px;
  height: 50px;
}

.child1 {
  /* 仅保留跨3列的要求，删除原来写死的起始列号1 */
  grid-column: span 3;
  background: red;
}

.child2 {
  /* 仅保留跨到容器最后一根网格线的要求，删除原来写死的起始列号4 */
  grid-column: auto / -1;
  background: blue;
}

效果验证 #

• 两个元素同时显示时：Child1会自动从第1列开始占3列宽度，Child2会顺着自动流从第4列开始一直延伸到容器末尾，和原来的布局视觉效果完全一致，没有任何偏移
• Child1设置display:none隐藏时：自动流扫描到前面没有占位元素，会直接让Child2从第1列开始摆放，一直跨满12列的全部宽度，完全填充之前空出来的区域，不需要额外的JS逻辑或者状态判断。

如果你因为复杂布局必须保留写死元素起始位置的写法，可以通过兄弟选择器做状态适配：
比如你用类控制Child1的隐藏状态时，只要加一段规则，当Child1隐藏时，把Child2的起始位置调整到第1列即可：

/* 当Child1带is-hidden类隐藏时，把它后面相邻的Child2的起始列改到第1列 */
.child1.is-hidden ~ .child2 {
  grid-column-start: 1;
}

这个方案的缺点是需要和你控制隐藏的状态逻辑绑定，维护成本比自动流方案高。

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