流体布局中不同高度div左侧垂直对齐的CSS实现方案咨询

结论：别用Flexbox，推荐CSS Grid #

Flexbox的行对齐逻辑是基于每行最高元素的，没法自动填补上方因元素高度不同留下的空白，反而会强制每行高度统一，不符合你的需求。

最优方案：CSS Grid + grid-auto-flow: dense #

这个组合完美适配你的场景：

• 容器设置display: grid，用repeat(auto-fill, [固定宽度])定义列，自动根据屏幕宽度生成合适的列数；
• 核心属性grid-auto-flow: dense会让Grid自动检测并填补前面的空白区域，高度不同的div会自动靠左紧凑排列，拉伸屏幕时列数增加，间隙会被自动填充，完全符合你要求的“默认下7、8、9在1、2、3下方，拉伸时消除1与4、2与5之间空白”的效果。

示例代码：

/* 容器样式 */
.grid-container {
  display: grid;
  /* 替换成你的div固定宽度，这里用200px举例 */
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-flow: dense;
  /* 可选：设置div之间的间距 */
  gap: 12px;
}

/* 子div样式 */
.grid-item {
  width: 200px; /* 和grid-template-columns的宽度保持一致 */
  /* 给不同的item设置不同高度，比如： */
}
.grid-item:nth-child(1) { height: 150px; }
.grid-item:nth-child(2) { height: 200px; }
.grid-item:nth-child(3) { height: 180px; }
/* ...其他item的高度 */

备选方案：CSS Columns（适合对排列顺序要求不高的场景） #

如果不需要严格的“横向优先”排列（比如允许先排满左列再排右列），可以用CSS多列布局：

• 容器设置columns: [列宽] auto，自动生成列；
• 子div设置break-inside: avoid防止被列拆分，保证每个div完整显示。

示例代码：

.column-container {
  /* 列宽200px，自动适配列数 */
  columns: 200px auto;
  column-gap: 12px;
}

.column-item {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 12px;
}

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