CSS布局：两列元素项间混合排序实现方案咨询

完全可以通过Flexbox或Grid实现你要的布局——元素高度由内容自动撑开，宽度占布局空间的百分比。以下是两种方案的具体实现：

Flexbox 实现 #

Flexbox适合一维（行/列）布局场景，代码简洁易维护：

HTML 结构 #

<div class="flex-container">
  <div class="flex-item">内容区块1<br>多行内容测试，高度随内容变化</div>
  <div class="flex-item">内容区块2</div>
  <div class="flex-item">内容区块3<br>更多示例内容<br>验证高度自适应效果</div>
</div>

CSS 样式 #

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1rem; /* 可选：设置元素之间的间距 */
}

.flex-item {
  flex: 0 0 31%; /* 固定宽度为布局空间的31%，不拉伸/收缩 */
  background: #f5f5f5;
  padding: 1rem;
}

• flex: 0 0 31% 确保元素宽度为布局容器的31%，不会因内容多少改变宽度；
• 元素高度完全由内部内容决定，无需设置固定值；
• flex-wrap: wrap 保证在小屏幕上元素自动换行，适配响应式布局。

Grid 实现 #

Grid适合二维布局场景，能更精准地控制行列结构：

HTML 结构 #

<div class="grid-container">
  <div class="grid-item">内容区块1<br>多行内容测试，高度随内容变化</div>
  <div class="grid-item">内容区块2</div>
  <div class="grid-item">内容区块3<br>更多示例内容<br>验证高度自适应效果</div>
</div>

CSS 样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 31%); /* 定义3列，每列占31%宽度 */
  gap: 1rem; /* 可选：设置元素间距 */
}

.grid-item {
  background: #f5f5f5;
  padding: 1rem;
}

• grid-template-columns: repeat(3, 31%) 直接指定三列的宽度占比；
• 若需要响应式布局，可替换为 repeat(auto-fit, minmax(250px, 1fr))，这样元素会在空间足够时自动填充列，空间不足时换行，同时保证每列最小宽度为250px；
• 元素高度同样由内部内容自动撑开，无需固定值。

方案选择 #

• 如果是简单的行/列布局，Flexbox更轻便；
• 如果需要复杂的二维网格布局（比如跨行跨列），Grid的控制力更强。

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