如何用纯CSS实现长矩形旁短矩形自适应堆叠布局？

可以通过CSS Grid + 嵌套Flex容器的组合方案实现你要的布局效果，完全不需要固定像素尺寸，适配未知宽度的元素：

HTML结构 #

<div class="layout-container">
  <!-- 1-3个高块 -->
  <div class="tall-item">高块1</div>
  <div class="tall-item">高块2</div>
  <!-- 矮块容器 -->
  <div class="short-items-wrapper">
    <div class="short-item">矮块1</div>
    <div class="short-item">矮块2</div>
    <div class="short-item">矮块3</div>
    <div class="short-item">矮块4</div>
    <div class="short-item">矮块5</div>
    <div class="short-item">矮块6</div>
  </div>
</div>

CSS代码 #

.layout-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(fit-content(100%), 1fr));
  grid-auto-flow: dense;
  gap: 1.2rem;
}

.tall-item {
  grid-row: span 7; /* 对应高块高度为矮块的7倍 */
  background-color: #e2e8f0;
  padding: 1rem;
}

.short-items-wrapper {
  grid-row: span 7; /* 和高块占据相同行数，保证高度对齐 */
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-content: flex-start; /* 矮块从容器顶部开始排列，避免拉伸 */
}

.short-item {
  flex: 1 1 fit-content(); /* 宽度由内容决定，空间充足时横向排列 */
  min-width: 0; /* 解决长内容溢出问题 */
  background-color: #cbd5e1;
  padding: 1rem;
}

实现原理 #

1. 外层Grid布局：
   • 用repeat(auto-fit, minmax(fit-content(100%), 1fr))实现自适应列数，元素宽度由内容决定，空间充足时自动多列排列，不足时自动收拢为单列。
   • grid-row: span 7让高块和矮块容器占据相同的7行网格，刚好匹配高块高度是矮块7倍的要求，保证垂直方向对齐。
2. 内层Flex容器：
   • 矮块容器用flex-wrap: wrap实现内部矮块的自动换行，空间足够时横向排列，不足时垂直堆叠。
   • align-content: flex-start确保矮块从容器顶部开始排列，不会因为容器高度被拉长而分散布局。

布局效果验证 #

• 宽屏状态：高块在左侧，矮块在右侧容器内尽可能横向排列，剩余空间不足时自动换行堆叠。
• 窄屏状态：当屏幕宽度只能容纳1列时，高块先排列，矮块容器整体移到高块下方；若能容纳2列，矮块容器仍留在高块右侧，内部自动堆叠。

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