CSS Grid使用auto-fit布局时意外生成多余空列问题咨询

问题原因 #

你为第3个article设置的grid-column: 1/-1是触发该问题的核心：
网格布局中-1代表显式网格的最后一条列线。浏览器解析这条规则时，会先按照当前容器宽度计算出最多可容纳的minmax(300px, 1fr)列数量，生成对应数量的显式列来满足「跨所有显式列」的需求。而auto-fit只会折叠完全没有被任何网格项引用、也没有被规则占用的空列，这些被跨列规则引用的列不会被折叠，就会出现多余空列的表现。

解决方法 #

把跨列规则从grid-column: 1/-1修改为grid-column: span 999即可：
span规则代表元素自动跨指定数量的列，只要设置的数值远大于你页面可能出现的最大列数（通用场景下999完全够用，无性能问题），就不会强制浏览器生成额外的显式列，auto-fit的空列折叠逻辑就可以正常生效。

修改后的CSS代码如下：

main {
    grid-area: main;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    grid-gap: 1em;
}

article:nth-of-type(3){
    grid-column: span 999;
    grid-row: 2/3;
}

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