CSS Grid实现不等高元素按高度换行布局求助

你的核心问题在于之前用margin设置区块间距时，导致.block-wrapper宽度超出要求。现在所有现代浏览器都支持 Flexbox 的gap属性，它可以完美解决这个问题——间距是容器内部的空间，不会影响容器的宽度计算，同时满足所有需求。

以下是完整的可运行代码：

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

.container {
  border: 1px solid black;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: flex-end; /* 满足 .block-wrapper 右对齐需求 */
}

.block-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* 开启垂直方向换行 */
  align-content: flex-end; /* 换行后保持区块靠右，确保.block1始终在右侧 */
  height: 100%; /* 继承容器高度，触发高度不足时的换行逻辑 */
  gap: 15px; /* 统一控制区块间纵向/横向间距，满足第5点要求 */
  margin-left: 15px; /* 你提到的其他元素所需左边距 */
}

.block1 {
  border: 2px solid darkgreen;
  width: 350px; /* 固定宽度350px */
  /* 高度由内容自动撑开，满足高度可变需求 */
}

.block2 {
  border: 2px solid darkred;
  width: 350px; /* 固定宽度350px */
  height: 250px; /* 固定高度，满足第3点要求 */
}

<div class="container">
  <div class="block-wrapper">
    <div class="block1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.</div>
    <div class="block2"></div>
  </div>
</div>

方案适配所有需求的说明： #

1. .block-wrapper 右对齐：通过外层.container的justify-content: flex-end实现，确保整个区块容器靠右侧排列。
2. .block1 高度可变：未设置固定高度，完全由内部文本内容自动撑开。
3. .block2 高度固定：明确设置height: 250px，保持高度不变。
4. 容器及区块宽度350px：.block1和.block2均设为width: 350px，未换行时.block-wrapper宽度自动等于350px；换行时宽度为350px + 15px + 350px = 715px——这里的额外15px是符合间距需求的必要空间，若你必须严格要求换行时宽度700px，可将gap替换为内部padding调整，但会牺牲间距的准确性。
5. 区块间所有方向间距15px：Flexbox 的gap属性同时控制纵向堆叠和横向排列时的间距，无需使用margin，避免了容器宽度溢出的问题。
6. 高度不足时.block2换行至左侧：.block-wrapper设置flex-direction: column和flex-wrap: wrap，结合height: 100%，当容器高度不足以容纳两个区块纵向堆叠时，.block2会自动换行到.block1左侧，align-content: flex-end保证.block1始终在右侧，完全符合你的核心交互需求。

你之前尝试的grid-template-rows: repeat(auto-fit, auto)无效，因为auto-fit是针对列的逻辑，Grid本身没有原生的“按高度自动换行”的行逻辑。不过我们可以通过结合grid-auto-flow: column和max-height模拟类似行为，但灵活性不如Flexbox方案：

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

.container {
  border: 1px solid black;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: flex-end;
}

.block-wrapper {
  display: grid;
  gap: 15px;
  grid-auto-flow: column; /* 优先按列排列 */
  grid-template-rows: auto; /* 行高由内容决定 */
  max-height: 100%; /* 限制高度，触发横向排列 */
  margin-left: 15px;
}

.block1 {
  border: 2px solid darkgreen;
  width: 350px;
}

.block2 {
  border: 2px solid darkred;
  width: 350px;
  height: 250px;
}

这个Grid方案的换行逻辑在临界高度时可能出现布局异常，因此更推荐前面的Flexbox方案。

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