唯一靠谱方案是grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，配合gap和明确容器宽度；auto-fit动态计算列数，1fr确保弹性伸展，子元素数量仅间接影响布局。
直接结论：用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))，配 gap 和明确的容器宽度；别碰 :has()、grid-auto-columns 或靠子元素数量写死列数。
为什么 auto-fit + minmax() 是唯一靠谱组合
浏览器不是按 DOM 节点数算列，而是根据容器可用宽度和你设的最小列宽（比如 240px）实时计算能塞几列。子元素数量只间接影响——项少但容器宽，照样多列；项多但窄，自然换行。
-
auto-fill会预留所有可能轨道，小屏下首行全是空白，用户得横向滚动才能看到第一张图 -
auto-fit折叠空轨道，让有内容的列均分剩余空间，右侧不留白，也不触发横向滚动 -
minmax(240px, 1fr)中的1fr是关键：它表示“上限由容器剩余空间决定”，不是固定值；写成minmax(240px, 300px)就锁死了列宽，响应失效 -
:has()完全不能控制grid-template-columns，规则如.grid:has(> div:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }会被浏览器整条忽略
常见错误现象与对应修复
你看到“列数没变”“全挤一行”“右侧大片留白”或“换行后最后一行间距炸开”，大概率是下面某条踩中了：
- 容器没设
width或max-width（比如父级是display: inline-block），导致 Grid 计算可用宽度失败，退化为单列 - 用
margin或padding模拟间隙，干扰了minmax()的空间判断；必须统一用gap（支持row-gap/column-gap独立设置） - 子元素内部高度不一致，误以为是 Grid 行高问题，其实
grid-auto-rows只管隐式行，对同一行内卡片高低差异无效；应在每个子项内部用display: flex; flex-direction: column; justify-content: space-between控制 - 写了
grid-auto-columns: 1fr却没定义grid-template-columns，结果所有子项横向溢出——因为自动放置项不触发隐式列，grid-auto-columns根本不执行
什么时候该放弃 Grid，改用 Flex？
如果你的真实需求是：“每行子元素均分该行宽度（1个占100%、2个各50%、3个各33.3%）”，那 repeat(auto-fit, minmax()) 不满足——它让所有列共享整个容器宽度，不是每行独立均分。
- 此时正确解法是
display: flex; flex-wrap: wrap;，子项设flex: 1; min-width: 240px; -
flex: 1隐含flex-basis: 0，所以min-width必须显式写，否则从 0 开始拉伸，布局不可控 - 现代浏览器（Chrome 104+ / Firefox 103+ / Safari 16.4+）已全面支持
gap，旧版 Safari 可用margin模拟，但需处理首尾项留白 - 别混用
width: 100%和flex: 1，后者已接管尺寸控制，冲突会导致渲染异常
真正难的不是写出那行 repeat(auto-fit, minmax())，而是接受 Grid 的列数由容器宽度驱动，不是子节点数量驱动。强行绑定数量，等于在对抗浏览器的布局模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
