CSS Grid动态布局问询：小元素数量可变时的纯CSS响应式环绕方案

需求与问题 #

需要实现以下网格布局：

• 包含1个橙色大横幅组件和多个绿色小组件
• 大屏设备：小组件自动环绕在大组件侧边
• 小屏设备：所有小组件位于大组件上方

当前用CSS Grid实现时，大组件被硬编码固定在第二行，无法适配小组件数量变化的场景，需要纯CSS自适应方案。

解决方案代码 #

修改后的CSS

.body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  grid-auto-flow: dense; /* 自动填充空白网格单元格 */
}

.small-item {
  height: 100px;
  background-color: green;
}

.large-item {
  grid-column: span 3;
  grid-row: span 2;
  background-color: orange;
}

/* 小屏适配：大组件占满整列，自然排在小组件之后 */
@media (max-width: 768px) {
  .large-item {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

HTML结构（无需调整）

<div class='body'>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='small-item'>Small item</div>
  <div class='large-item'>Large item</div>
</div>

核心原理 #

1. grid-auto-flow: dense：开启后网格会自动填充布局中的空白单元格，大组件占据3列2行后，后续的小组件会自动填补其侧边空隙，实现动态环绕效果，完全适配小组件数量变化。
2. 移除小组件固定宽度：让小组件宽度由网格列自动控制，保持布局一致性。
3. 小屏媒体查询：让大组件占满整列并取消固定行位置，此时所有小组件会自然排列在大组件上方，无需硬编码行号。

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