repeat(auto-fit, minmax())可实现列数自适应，无需js或媒体查询；auto-fit合并空轨道并均分剩余空间，minmax()设最小列宽兜底、1fr弹性拉伸，避免auto-fill留白。
用 repeat(auto-fit, minmax()) 让列数随内容自适应
不需要 JS，也不用预设列数，auto-fit 会根据容器宽度和子项最小尺寸自动计算能放几列，并把剩余空间均分给所有列。关键不是“固定列”，而是“最小列宽兜底 + 剩余空间拉伸”。
常见错误是写成 auto-fill：它会为“可能存在的项”预留空轨道，导致加载前就出现空白列；而 auto-fit 会合并未使用的轨道，让已有项真正占满容器。
-
minmax(250px, 1fr)表示每列至少 250px，最多等分剩余空间；内容少时列变宽，内容多时自动换行 - 必须配合
grid-auto-rows: auto（尤其动态插入后），否则新行高度可能塌陷为 0 - 别在父容器上同时写
grid-template-rows和grid-auto-rows，后者会被前者覆盖
grid-auto-flow: column 实现垂直列优先填充
当你要的是“先填满第一列，再填第二列”（比如通讯录、词典列表），而不是默认的“先填满第一行”，就得切换自动流方向。但只改 grid-auto-flow: column 不够——浏览器会堆成一长列，因为没限制行数。
必须显式定义行高或行数，例如 grid-template-rows: repeat(3, auto)，这样 Grid 才知道“每列最多 3 行”，超出就进下一列。
- 小屏下建议用媒体查询切回
grid-auto-flow: row，并重置grid-template-rows为unset，避免列优先逻辑干扰阅读流 - 如果子项高度差异大，
auto行高可能导致列间错位；可改用minmax(40px, max-content)更稳 - 注意：IE11 完全不支持
grid-auto-flow: column，需降级为 Flex + 多个包裹容器
用 CSS 变量 + :root 控制列数，但别在伪类里改
想用 JS 或用户交互切换列数？可以，但变量必须定义在 :root 或网格容器自身上，且 JS 修改时传字符串值，比如 document.documentElement.style.setProperty('--cols', '5')。
常见坑是把变量写在 .grid:hover { --cols: 5 } 里——多数浏览器不会触发 grid 重计算，视觉无变化；或者写成 --cols: "3"（带引号），CSS 解析失败，整条 grid-template-columns 被忽略。
- 默认值必须存在：
:root { --cols: 4 }，不能只在媒体查询里定义 - 响应式切换更推荐直接在媒体查询中覆盖变量：
@media (max-width: 768px) { :root { --cols: 2; } } - Shadow DOM 或 iframe 内的网格，变量得定义在容器元素上，如
.my-grid { --cols: 3; }
复杂分组（如 3-2-3-2 循环）靠 grid-column: span + :nth-child()
如果列数不是简单等宽，而是按规律交替（比如三列宽一组、两列宽一组），就不能依赖 auto-fit，得用固定基底网格 + 精确跨度控制。典型做法是设 6 列基础轨道，再用 :nth-child(5n + 4) 这类选择器匹配每组边界元素。
这种方案灵活但难调试：一旦 HTML 结构里混入非列表项（比如广告 div），:nth-child 序号就会偏移，整个分组错乱。
- 确保所有参与布局的子元素是同级、连续、无间隙的
div或li - 用
:is()合并多个选择器，减少重复声明，比如:is(:nth-child(5n), :nth-child(5n + 4)) - 不要试图用
order改变逻辑顺序——它只影响视觉排序，不改变:nth-child的计数基准
最易被忽略的是：动态插入内容后，如果没触发重排（比如用 innerHTML 批量追加），某些旧版 Chromium 可能不刷新 auto-fit 计算结果；稳妥做法是插入后对容器执行一次 getComputedStyle().gridTemplateColumns 强制读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
