CSS Grid布局中单个卡片展开时如何避免其他列产生多余空白？

通过map方法渲染React卡片组件组成CSS Grid网格布局，实现卡片展开功能时出现布局异常：单张卡片展开后所在行高度同步变化，将下方卡片整体向下推挤，同列卡片位移符合预期，但其他未展开卡片所在列出现多余空白间距。

• 未展开状态：
  
• 展开后当前效果：
  
• 展开后期望效果：
  

现有代码 #

当前网格CSS：

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30rem);
  justify-content: space-evenly;
  justify-items: center;
  row-gap: 1rem;
  align-items: flex-start;
  height: max-content;
  width: 100%;
}

HTML结构：

<div class="layout">
    <div class="card" />
    <div class="card" />
    <div class="card" />
</div>

这是CSS Grid的原生布局规则导致的：Grid是严格的二维行列布局，同一网格行内的所有单元格共享统一行高，只要行内任意元素高度增加，整行所有单元格高度都会同步被撑开。已设置的align-items: flex-start仅能让卡片在自身所属的网格单元格内靠上对齐，无法改变单元格本身被撑高的事实，因此其他列的单元格下方会出现无法被填充的空白，下方卡片也无法上移补位。

方案1：生产环境推荐（兼容性最佳，改造成本最低） #

替换Grid为CSS多列（Multi-column）布局，天然支持纵向流式排布，不会出现行高撑开导致的空白问题，全主流浏览器兼容：

.layout {
  width: 100%;
  /* 自动按30rem的列宽计算适配的列数 */
  column-width: 30rem;
  column-gap: 1rem;
}
.card {
  /* 核心属性：防止卡片内容被多列布局拆分截断 */
  break-inside: avoid;
  /* 保留原有卡片的宽度、边距等样式 */
  width: 30rem;
  margin-bottom: 1rem;
}

替换后任意卡片展开时，只会将同列下方的卡片向下推挤，其他列卡片保持紧贴上方元素的状态，和期望效果完全一致，不需要额外编写JS逻辑。

方案2：保留Grid语法的实验性方案 #

如果希望继续使用Grid语法，可以启用Grid的原生瀑布流（Masonry）特性，注意该特性目前兼容性较差，仅Firefox、Safari 17+默认支持，Chrome需要手动开启浏览器实验开关，不建议生产环境使用：

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, 30rem);
  /* 核心属性：启用瀑布流纵向排布，取消严格行高对齐 */
  grid-template-rows: masonry;
  justify-content: space-evenly;
  justify-items: center;
  row-gap: 1rem;
  align-items: flex-start;
  width: 100%;
}

不要尝试通过JS动态计算卡片高度、手动设置Grid定位的方式实现该效果，维护成本极高，在响应式场景、卡片内容动态变化时很容易出现布局错乱。

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