如何实现支持自动放置的响应式Grid网格布局？

常规Grid布局默认严格按行轨道对齐网格项，高度不统一的卡片会在下方留出大量空白，这就是你当前效果和预期不符的核心原因。根据需求直接选对应方案即可：

• 需要保持横向优先的排列顺序，选Grid dense方案
• 需要完全无空隙的瀑布流排列，选多列布局方案

方案1：Grid 紧凑布局（推荐） #

不需要改动现有DOM结构，给Grid容器加上自动填充空隙的属性即可：

.card-grid {
  display: grid;
  /* 列数按需调整，响应式场景用auto-fill适配不同屏幕宽度 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  /* 核心配置：自动填补网格空隙 */
  grid-auto-flow: row dense;
}
/* 有需要占更高/更宽位置的特殊卡片，单独给对应元素加跨行/跨列属性即可 */
.feature-card {
  grid-row: span 2;
}

方案2：多列瀑布流（和目标截图效果完全一致） #

如果不需要严格的网格对齐，要完全贴合卡片高度的瀑布流效果，用CSS多列实现更简单：

.card-grid {
  /* 列数按需调整，移动端可配合媒体查询改成2列/1列 */
  column-count: 3;
  column-gap: 16px;
}
.card-item {
  /* 防止卡片被列截断 */
  break-inside: avoid;
  margin-bottom: 16px;
}

注意：多列布局的排列逻辑是纵向优先，会先填满第一列再填第二列；Grid dense方案是横向优先，排列顺序和常规文档流更接近，根据业务需求选择即可。

效果对照 #

当前实现效果：

目标实现效果：

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