直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是目前唯一真正零 JS、浏览器原生支持的动态列数方案，它让浏览器根据父容器宽度和最小列宽实时计算轨道数，auto-fit 合并空轨道，1fr 实现弹性均分，minmax 下限保可读性、上限保伸缩性，配合 gap、justify-content 和明确容器宽度方可完整生效。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就行，这是目前唯一真正零 JS、浏览器原生支持的动态列数方案。
为什么 auto-fit + minmax() 是唯一靠谱写法
它不是“按子项个数算列”，而是让浏览器实时根据父容器可用宽度和每列最小宽度，反复尝试生成轨道：只要剩余空间 ≥ 最小宽度，就加一列；不够就回退。整个过程不依赖媒体查询，也不需要监听 resize。
-
minmax(250px, 1fr)中的250px是硬性下限——低于这个值，内容会换行，不会被压缩 -
1fr不是固定值，而是“把当前所有已生成轨道之外的剩余空间，均分给它们” - 写成
minmax(250px, 300px)或minmax(250px, max-content)会锁死列宽，失去弹性，auto-fit退化为无效 -
auto-fit会合并空轨道（没子元素的列），auto-fill则保留所有可能轨道——后者在小屏下容易右侧大片留白，甚至触发横向滚动
grid-template-columns 外围必须配哪些样式
单独一行声明远远不够，漏掉任意一项都可能导致单列、塌陷或不渲染：
- 父容器必须有明确宽度上下文，比如
width: 100%、max-width: 1200px，或嵌套在 flex 容器中但未设flex: 1 - 必须加
gap控制间距，别用margin——后者会干扰轨道计算，尤其在子项用justify-self时 - 小屏下单列靠左太难看？加
justify-content: center让整行居中；要左对齐就用start - IE 不支持
auto-fit，降级只能靠@media+ 固定列数，比如grid-template-columns: 1fr→repeat(2, 1fr)→repeat(3, 1fr)
子项样式怎么悄悄破坏动态列数
即使 grid-template-columns 写得完全正确，子项一个错误设置就能让 auto-fit 失效：
立即学习“前端免费学习笔记（深入）”；
- 子项设了
width: 300px或flex: 0 0 300px：强制撑开列宽，导致换行错乱或横向溢出 - 子项用了
float、position: absolute或包裹在display: flex容器里：Grid 轨道计算中断，子项退化为普通块级流 - 子项内文字过长且没处理：默认不折行，可能突破
minmax()下限；建议统一加overflow-wrap: break-word - 嵌套网格时，子网格的直接父元素必须是
display: grid，不能夹一层display: flex的 wrapper
最常被忽略的是：动态列数本质是“轨道数量随容器变”，不是“子项自动重排”。一旦子项脱离文档流或尺寸失控，浏览器就无法准确判断该生成几条轨道——这时候再调 minmax() 参数也没用。
