repeat(auto-fit, minmax())能实现少内容时等宽撑满，因auto-fit合并空轨道使有内容的列均分容器宽，minmax()约束最小宽度；auto-fill则保留空轨道导致列宽不均。
grid-template-columns 用 repeat(auto-fit, minmax()) 才能撑满容器
内容少时列宽不均，本质是 Grid 默认行为：它只按需分配轨道，不会主动拉伸空列。直接写 repeat(4, 1fr) 或 1fr 1fr 1fr 1fr，当只有 2 个子元素时，Grid 仍会创建 4 条轨道，但后两条是空的——浏览器不会把前两个项“拉宽去填满四列”，它们只会各占 1fr（即各占 25% 宽度），视觉上就是两列窄、两边大片空白。
真正能让少内容也等宽撑满的，是 repeat(auto-fit, minmax(200px, 1fr))：
-
auto-fit会把空轨道合并掉，只保留有内容的列所对应的轨道 - 然后这些列再按
1fr均分整个容器宽度 -
minmax(200px, 1fr)确保单列不会窄于 200px，避免小屏下文字挤成一团
比如只有 1 个卡片，它就独占 100% 宽；有 2 个，就各占 50%；有 3 个，各占 ~33.3%，以此类推——列数动态适配，宽度始终等分可用空间。
为什么 auto-fill 不行？它会让空列占位
auto-fill 的行为是“尽可能多地生成符合 minmax() 条件的轨道”，哪怕没内容也会留空。例如容器宽 800px，minmax(200px, 1fr) 下最多可塞 4 列，auto-fill 就真建 4 条轨道。此时若只有 2 个子元素，它们仍各占 1fr（200px），剩下 400px 空白在右侧——这不是“等宽”，是“等轨道宽”，但视觉上明显不均。
立即学习“前端免费学习笔记（深入）”；
你看到的“列宽不一致”，往往就是误用了 auto-fill 而非 auto-fit。
简单记：要“内容少也撑满”，必须用 auto-fit；要“预留固定列位（如仪表盘占位）”，才考虑 auto-fill。
内容本身撑开网格项？加 min-width: 0
即使用了 auto-fit，如果某个网格项里塞了长单词、未折行的 URL 或 flex 容器，默认会拒绝收缩，强行拉宽所在列，破坏等宽。
解决方法是在网格项上设：
.grid-item {
min-width: 0;
}
这告诉浏览器：“允许我被压缩，别硬撑”。配合 overflow-wrap: break-word 或 text-overflow: ellipsis，就能守住列宽一致性。
别漏掉这个——它和 auto-fit 是搭档，缺一不可。
gap 和 box-sizing 影响实际宽度计算
gap 是轨道间隙，不参与 1fr 分配，但它会占用总宽度。比如容器宽 1000px，gap: 20px，4 列布局，那 3 个 gap 共占 60px，剩余 940px 才由 4 列均分。
更隐蔽的问题是 box-sizing：如果网格项有 padding 或 border，又没设 box-sizing: border-box，那它的实际宽度 = 1fr + padding + border，必然溢出或错位。
建议全局重置：
* {
box-sizing: border-box;
}
否则调试时你会发现 DevTools 显示列宽是 25%，但实际渲染远不止——那是 padding 在捣鬼。
真正难的不是写出 repeat(auto-fit, minmax())，而是意识到 Grid 只管轨道，不管内容是否老实。等宽是轨道一致 + 内容守规矩的共同结果，漏掉任何一环，都会在小屏或少数据时突然露馅。
