应使用 css 变量控制列数，而非直接修改 grid-template-columns 字符串；通过 setproperty('--col-count', 'n') 动态更新变量，配合 repeat(var(--col-count), minmax(min, 1fr)) 和媒体查询实现健壮响应式网格。
直接改 grid-template-columns 字符串是错的路——它会覆盖 minmax()、auto-fit 等弹性逻辑，小屏下直接崩；真正该动的，是 CSS 变量。
为什么 setProperty('--cols') 比 style.gridTemplateColumns = 'repeat(...)' 更可靠
硬拼字符串容易漏括号、引号嵌套出错，更致命的是：它把布局规则从 CSS 层抽到 JS 里，媒体查询无法覆盖，transition 失效，resize 时还可能触发强制同步布局（layout thrashing）。
CSS 变量天然支持级联、继承和 @media 覆盖。JS 只需“通知”数值变化，样式层自己响应：
-
--cols必须定义为无单位数字（如--cols: 3），不能是字符串"3" - 变量作用域要匹配：如果网格容器类名是
.grid，变量就得在.grid { --cols: 3; }里定义，而不是挂在:root - 修改时用
element.style.setProperty('--cols', '5')，不是document.documentElement.style.setProperty
如何让动态列数兼容 minmax() 和响应式行为
纯 repeat(var(--cols), 1fr) 在窄屏下会把列压得极小，尤其当 --cols 固定为 4 但容器只有 300px 宽时，每列只剩 75px。真正健壮的写法是把弹性逻辑留在 CSS 里，只让列数可变：
- 推荐 CSS 写法：
.grid { --col-count: 3; grid-template-columns: repeat(var(--col-count), minmax(200px, 1fr)); } - 这样 JS 只改
--col-count，minmax()始终生效，浏览器自动判断是否撑开或收缩 - 若需小屏强制单列，直接在媒体查询里重设变量：
@media (max-width: 480px) { .grid { --col-count: 1; } }
动态改列数后内容错位或高度塌陷？检查 grid-auto-rows
显式网格（grid-template-columns）只管列，新增子项掉进隐式行轨道，而默认隐式行高是 auto——内容少时视觉上“消失”，内容多时又突然撑开抖动。
必须显式声明隐式行规则：
- 通用方案：
grid-auto-rows: minmax(40px, auto)（最小可读高度 + 自适应撑开） - 固定高度容器中均分空间：
grid-auto-rows: 1fr（仅限height明确的父容器） - 绝对值如
80px要慎用：内容超长会被裁剪，也不响应字体缩放
别踩 auto-fill 和 auto-fit 的语义坑
两者都需搭配 minmax() 才能动态生成轨道，但行为截然不同：
-
auto-fill：按最小宽度尽可能铺满整行，哪怕后面几列没内容也保留空白格子（DOM 存在、视觉为空） -
auto-fit：先尝试铺满，再把空轨道“收掉”，把空间重新分配给有内容的列 - 响应式场景几乎都该用
auto-fit；auto-fill只适合需要预设槽位（比如动画占位、表单固定字段数）的特殊需求
真正难的不是写对那行 CSS，而是理解 auto-fit 在渲染阶段会丢弃空轨道，而 minmax() 的第一个参数决定了“何时开始丢”——设得太小，小屏挤出十几列；设得太大，中屏只剩两列留白。这个阈值得结合设计稿实测，不是靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
