使用repeat(auto-fit)实现自适应网格列，支持单元格跨2列及以上

问题原因 #

当给网格元素设置grid-column: span 2时，会强制网格容器至少保留2列轨道。结合repeat(auto-fit, minmax(500px, 1fr))使用时，一旦视口宽度小于2*500px=1000px，网格无法自动折叠为单列，反而会挤压列宽导致内容溢出视口。

解决方案 #

方案1：媒体查询动态调整跨列数（兼容性最优）

通过一个简单的媒体查询，在视口宽度不足时让宽元素自动占满整行，避免强制多列：

.grid {
  display: grid;
  /* 视口小于500px时，列宽自动占满100%，形成单列 */
  grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
  gap: 0.2rem; /* 用gap替代元素padding，布局更整洁 */
}

.grid-item {
  padding: 0.2rem;
  border: 0.1rem solid black;
}

.grid-item.tall {
  padding: unset;
  border: unset;
  /* 内部嵌套网格，保持布局一致性 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}

.grid-item.wide {
  /* 默认单列布局下占满整行 */
  grid-column: span 1;
}

/* 视口宽度足够容纳2列时，让宽元素跨2列 */
@media (min-width: 1000px) {
  .grid-item.wide {
    grid-column: span 2;
  }
}

对应的HTML无需修改：

<div class="grid">
  <div class="grid-item">Regular grid child</div>
  <div class="grid-item tall">
    <div class="grid-item">Short grid child</div>
    <div class="grid-item">Short grid child</div>
  </div>
  <div class="grid-item wide">Wide grid child</div>
</div>

方案2：容器查询（现代浏览器推荐）

如果你的目标浏览器支持容器查询，可以基于网格容器的宽度调整布局，而非依赖视口，适配更灵活：

.grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
  gap: 0.2rem;
}

.grid-item {
  padding: 0.2rem;
  border: 0.1rem solid black;
}

.grid-item.tall {
  padding: unset;
  border: unset;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}

.grid-item.wide {
  grid-column: span 1;
}

/* 容器宽度足够容纳2列时调整跨列数 */
@container (width >= 1000px) {
  .grid-item.wide {
    grid-column: span 2;
  }
}

方案3：CSS变量简化扩展

如果后续有更多不同跨列需求，用CSS变量统一管理参数，减少重复代码：

.grid {
  --column-min-size: 500px;
  --wide-span: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--column-min-size), 100%), 1fr));
  gap: 0.2rem;
}

/* 基于最小列宽动态计算触发条件 */
@media (min-width: calc(var(--column-min-size) * 2)) {
  .grid {
    --wide-span: 2;
  }
}

.grid-item {
  padding: 0.2rem;
  border: 0.1rem solid black;
}

.grid-item.tall {
  padding: unset;
  border: unset;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}

.grid-item.wide {
  grid-column: span var(--wide-span);
}

方案说明 #

• 所有方案均无需JavaScript，纯CSS实现响应式适配
• 方案1兼容性最好，支持所有现代及旧版浏览器
• 方案2更适合复杂布局场景，比如网格嵌套在不同宽度的容器中
• 方案3便于后续扩展，只需修改CSS变量即可调整列宽和跨列规则

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