CSS Grid容器无法自适应内容尺寸子项宽度匹配最大盒子问题

架构老林

2026-8-26

问题根源

你当前所有盒子宽度一致的核心原因是grid-template-columns配置中使用了1fr作为列宽单位：1fr会将网格容器的剩余可用空间平均分配给对应列，同一行内使用1fr配置的列会被强制对齐为相同宽度，最终所有列宽都会适配行内内容最宽的子项，和你写多少个不同列数的动态切换类没有关系。

修复方案

根据你的布局需求二选一即可，不需要写多套类名动态切换列数，Grid原生能力就能自动适配：

需求1：固定列数，每列宽度随自身内容自适应，不强制所有列等宽
把repeat()参数里的1fr替换为auto，同时配置子项不拉伸即可：

.sectionContainer_content {
    display: grid;
    /* 列数按需修改即可，比如1/2/3/4列都只改repeat第一个参数 */
    grid-template-columns: repeat(4, auto);
    gap: 36px;
    margin: 18px;
    /* 禁止子项被拉伸撑满列宽 */
    justify-items: start;
}

需求2：不固定列数，自动根据容器剩余空间换行，每个子项宽度完全贴合自身内容
直接用自适应列配置，不需要手动判断子项数量切换类名：

.sectionContainer_content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
    gap: 36px;
    margin: 18px;
    justify-items: start;
}