直接用 repeat(auto-fit, minmax()) 可实现列数自适应，无需媒体查询或js；auto-fit 会收缩空轨道并拉伸现有列填满容器，而 auto-fill 保留所有轨道易致留白；minmax() 第二参数宜用 1fr 而非固定像素，避免卡列；父容器需为布局盒，且 gap 与 justify-content 是视觉完善的关键。
直接用 repeat(auto-fit, minmax()) 就能实现，不用媒体查询，也不用 JS。 它不是“猜宽度”，而是让浏览器实时计算：容器够宽就多一列，变窄就少一列，每列还保持合理宽度。
为什么 auto-fit 比 auto-fill 更适合列数自适应
两者都用来动态生成列轨道，但行为关键不同：
-
auto-fit会把空余空间重新分配给已有列，让它们拉伸填满容器——适合卡片、列表这类需要视觉节奏一致的布局 -
auto-fill保留所有可能的轨道（哪怕没内容），容易在窄容器里留白或撑开间隙 - 真机调试时对比看：小屏下
auto-fill可能出现“三列只占一半宽”，而auto-fit会让三列均分全宽
minmax() 的两个参数不能随便写
写成 minmax(250px, 1fr) 是对的；写成 minmax(250px, 300px) 就容易卡住：
- 第二参数写死像素（如
300px）会导致浏览器“宁可留白也不缩列”——容器宽 950px 时，它宁愿只放 3 列（3×300=900），也不愿把第 4 列压到 250px 塞进去 -
1fr表示“剩余空间均分”，是弹性上限，不是固定值，和容器宽度强绑定 - 如果真要限制最大列宽，用
clamp(250px, 1fr, 320px)替代第一参数，更安全
容器本身得是“布局盒”，否则 minmax() 不起作用
Grid 列数响应的是**直接父容器的宽度**，但这个父容器必须能产生布局盒：
- 别在
display: contents或display: none的元素上设grid—— 它不参与盒模型，minmax()算不出有效宽度 - Flex 容器或 Grid 容器自身可以当网格父容器，但它的子项必须是真实 DOM 元素，不能是伪元素或被
contents吞掉的节点 - 如果父容器加了
container: inline-size（用于 container queries），那minmax()依然生效，但此时响应的是容器尺寸而非视口
最常被忽略的一点：gap 和 justify-content 不是锦上添花，而是必要调节项。没 gap，窄屏下单列可能贴边难看；没 justify-content: center，单列不会居中——这些细节不加，auto-fit 算得再准，视觉上也像没调好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
