嘿，这个需求其实用CSS Grid或者Flexbox都能完美实现，我给你拆解两种方案，你可以根据自己的场景选：

如果你想严格贴合“网格”的布局语义，用CSS Grid是最适合的。它能自动根据组件尺寸排列，每行高度由该行最高组件决定，同时完全保留组件自身的尺寸。

代码示例 #

<div class="grid-container">
  <div class="component component-1">组件1</div>
  <div class="component component-2">组件2</div>
  <div class="component component-3">组件3</div>
  <div class="component component-4">组件4</div>
</div>

.grid-container {
  display: grid;
  /* 自动生成列，每列宽度匹配组件的实际宽度 */
  grid-template-columns: repeat(auto-fill, max-content);
  /* 每行高度自动适配该行最高的组件 */
  grid-auto-rows: auto;
  /* 组件之间的间距（可选，按需调整） */
  gap: 12px;
  /* 让组件保持自身高度，不被拉伸 */
  align-items: start;
}

/* 示例组件样式，各自有固定宽高 */
.component {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.component-1 {
  width: 150px;
  height: 100px;
}
.component-2 {
  width: 200px;
  height: 150px;
}
.component-3 {
  width: 120px;
  height: 80px;
}
.component-4 {
  width: 180px;
  height: 120px;
}

关键属性解释 #

• repeat(auto-fill, max-content)：自动生成足够的列，每列宽度等于组件的实际宽度（不管是固定宽还是内容撑起来的宽度），当容器剩余空间放不下下一个组件时，自动换行。
• grid-auto-rows: auto：每行的高度完全由该行中最高的组件决定，不会强制所有行等高。
• align-items: start：确保组件保持自己的高度，不会被拉伸填满单元格（如果用stretch的话，组件高度会被拉到和行高一致，不符合你“组件尺寸不变”的需求）。

如果你的布局逻辑相对简单，Flexbox是更轻量的选择，它的换行特性刚好能满足“空间不足自动换行”的需求，同样能实现行高适配最高组件、保留组件尺寸的效果。

代码示例 #

<div class="flex-container">
  <div class="component component-1">组件1</div>
  <div class="component component-2">组件2</div>
  <div class="component component-3">组件3</div>
  <div class="component component-4">组件4</div>
</div>

.flex-container {
  display: flex;
  /* 空间不足时自动换行 */
  flex-wrap: wrap;
  /* 组件之间的间距（可选） */
  gap: 12px;
  /* 保持组件自身高度，行高由最高组件撑开 */
  align-items: start;
}

/* 复用同样的组件样式 */
.component {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.component-1 {
  width: 150px;
  height: 100px;
}
.component-2 {
  width: 200px;
  height: 150px;
}
.component-3 {
  width: 120px;
  height: 80px;
}
.component-4 {
  width: 180px;
  height: 120px;
}

关键属性解释 #

• flex-wrap: wrap：开启换行逻辑，当容器宽度不足以容纳所有组件在一行时，自动换行到下一行。
• align-items: start：阻止组件被拉伸，保持自身的固定高度，此时每行的高度会被该行中最高的组件自动撑开。
• gap：控制组件之间的间距，比用margin更省心，不会出现外边距折叠的问题。

额外小提示 #

• 如果你的组件没有设置固定宽度，而是由内容决定宽度，两种方案都能自动适配组件的自然宽度。
• 如果需要组件在每行内垂直居中，可以把align-items改成center，组件依然保持自身高度，行高还是由最高组件决定。
• 如果要兼容非常旧的浏览器（比如IE11），gap属性可能不支持，这时候可以用margin代替，但要注意处理换行后组件的margin问题（比如给容器加负margin抵消）。

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