auto-fit + minmax 是首选方案，因它让浏览器动态计算列数，容器够宽则多列、窄则自动换行，避免空轨道且无需媒体查询；常见错误是误用 auto-fill 或漏写 minmax。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现真正自动折行，不需要写一堆媒体查询，也不依赖 JavaScript。
为什么 auto-fit + minmax 是首选方案
它让浏览器在渲染时动态计算列数：只要容器宽度 ≥ 单列最小宽度（如 250px），就尽可能多塞一列；否则自动把内容“推”到下一行。这比手动写 @media (max-width: 768px) 更鲁棒，能覆盖折叠屏、分屏窗口、缩放等所有中间尺寸场景。
常见错误是误用 auto-fill ——它会预留空列，导致小屏下出现大量空白；而 auto-fit 会收缩未填充的轨道，实际更符合“自动折行”的直觉。
flex-wrap: wrap 也能折行，但要注意子项宽度约束
如果你已用 Flex 布局（比如工具栏、导航菜单），flex-wrap: wrap 确实可用，但必须配合子项的收缩能力，否则会卡死不折行：
- 父容器必须设
display: flex和flex-wrap: wrap - 每个子项要设
flex: 0 1 200px（即flex-grow: 0,flex-shrink: 1,flex-basis: 200px） - 避免子项有
white-space: nowrap或固定width且没配flex-shrink: 1 - 父容器建议加
min-width: 0，尤其嵌套在 Grid 或 transform 容器里时
box-sizing 和 gap 容易被忽略的细节
gap 在 Grid 和 Flex 中都支持，但老版本 Safari 对 Flex 的 gap 兼容性差，建议用 margin 回退；Grid 则无此问题，优先选 Grid。
box-sizing: border-box 必须加在子项上——否则 padding/border 会撑大 minmax() 或 flex-basis 的计算结果，导致折行时机错乱。检查 DevTools 的 computed 样式，确认子项的 box-sizing 真的是 border-box。
真正难的不是写哪一行 CSS，而是整条渲染链路中任意一环（父容器 width 计算、transform 隔离、全局 box-sizing 重置、甚至编辑器 iframe 的嵌套层级）都可能让折行失效。先查 computed width，再看 flex-basis 是否被撑开，最后确认 min-width 是否被继承干扰——顺序不能反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
