能否用CSS Grid让网格项填充其他网格项留下的空白列空间？

要实现窗口缩放时让网格项‘C’填充‘B’（头像）留下的空白，同时保留正常的grid-gap，可以通过调整网格项的行列跨度来实现，具体步骤如下：

• 调整网格项C的列跨度：让C同时占据第一列和第二列的第二行区域，这样就能填充B下方的空白空间。
• 保留原有网格间距：grid-gap会自动作用于网格项之间，不需要额外调整。

修改后的核心CSS代码如下：

.item-c {
  grid-column: 1 / -1; /* 从第一列延伸到最后一列，等价于1 / span 2 */
  grid-row: 2;
}

完整逻辑说明 #

1. 你的原有布局中，B设置了align-self: start来保持方形，导致它所在的第二列第一行单元格下方出现空白。
2. 通过让C的grid-column覆盖所有列，它会占据第二行的整个宽度，自然填充B下方的空白区域。
3. 网格间距grid-gap会正常生效，因为它是网格项之间的间距，C和B、A之间的间距都会被保留。

如果希望更灵活地控制布局，也可以给网格容器显式定义行高：

.grid {
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: auto 1fr; /* 第一行高度由内容决定，第二行占剩余空间 */
  grid-gap: 20px;
}

这样第二行的C会自动填满剩余的垂直空间，进一步确保空白区域被完全填充。

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