CSS Grid中如何让元素最多跨2列且不超出网格总列数？

不需要媒体查询，我们可以通过CSS变量+min()函数实现自适应的列跨度，让.large-item仅在网格存在2列及以上时跨2列，否则自动适配为1列：

#content {
    display: grid;
    /* 定义最小列宽的CSS变量，方便统一修改 */
    --min-col-width: 240px;
    /* 基础网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
}

#content .small-item {
    grid-column: span 1;
}

#content .large-item {
    /* 核心逻辑：最多跨2列，当网格列数不足2时自动适配为1列 */
    grid-column: span min(2, calc((100% - 1px) / var(--min-col-width)));
}

原理说明 #

• calc((100% - 1px) / var(--min-col-width))：计算当前屏幕宽度下能容纳的最小列数（减1px是为了避免刚好等于2倍最小宽度时出现小数精度问题）。
• min(2, ...)：限制最大跨度为2列，当计算出的列数小于2时，自动取计算值（最终会被浏览器解析为1列，因为网格跨度不允许小数）。

更简洁的clamp()方案（现代浏览器支持） #

如果你的目标浏览器支持clamp()函数，可进一步简化代码：

#content .large-item {
    grid-column: span clamp(1, 2, calc((100% - 1px) / var(--min-col-width)));
}

clamp(1, 2, value)的作用是：当value小于1时取1，大于2时取2，中间取value，效果和上述min()方案完全一致。

这样就彻底摆脱了媒体查询的束缚，无论后续调整最小列宽还是屏幕尺寸变化，布局都会自动适配。

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