如何让Grid子元素根据容器列数自适应跨2或3列？

不用硬编码媒体查询的触发宽度，纯CSS就能实现你要的自适应跨列逻辑，核心是用CSS变量结合计算函数，精准匹配auto-fill生成的列数：

.container {
  --min-col-width: 250px; /* 把列最小宽度抽成变量，方便统一修改 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
  gap: 1rem; /* 可选，给子元素加间距 */
}

.wide-child {
  /* 计算当前容器自动生成的列数：和auto-fill的逻辑完全一致，向下取整 */
  --current-cols: calc((100% - (100% % var(--min-col-width))) / var(--min-col-width));
  /* 限制跨列数：最多3列，最少1列，匹配当前实际列数 */
  --span-cols: clamp(1, var(--current-cols), 3);
  grid-column: span var(--span-cols);
}

原理说明 #

1. 统一变量维护：把列的最小宽度抽成--min-col-width，确保容器列定义和跨列计算用的是同一个值，避免后续修改时出现不一致。
2. 精准计算列数：通过calc()的取模运算，算出容器宽度能容纳多少个完整的最小宽度列，这个结果和auto-fill生成的列数完全同步。
3. 动态限制跨列数：用clamp()函数把跨列数锁定在1-3之间：
   • 当容器只有1列时，跨1列
   • 容器有2列时，跨2列
   • 容器有3列及以上时，跨3列

场景验证 #

• 容器宽度小于250px：仅1列，.wide-child占满整行
• 250px ≤ 容器宽度 < 500px：自动生成1列，.wide-child占1列
• 500px ≤ 容器宽度 < 750px：自动生成2列，.wide-child跨2列
• 容器宽度≥750px：自动生成3列及以上，.wide-child跨3列

如果后续需要调整最大跨列数（比如改成最多跨2列），只需要修改clamp()的第三个参数即可，非常灵活。

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