应使用CSS自定义属性控制grid列数而非直接修改gridTemplateColumns字符串，即通过setProperty('--col-count', 'n')更新变量，并在CSS中用repeat(var(--col-count), minmax(200px, 1fr))保持响应式逻辑，配合媒体查询和auto-fit实现自动适配。
直接改 gridTemplateColumns 字符串会破坏响应式逻辑
很多人一上来就写 element.style.gridTemplateColumns = 'repeat(4, 1fr)'，结果发现原本带 minmax() 或 auto-fit 的布局在小屏下直接崩了。JS 覆盖的是整条声明，CSS 里写的弹性规则全被抹掉。更麻烦的是，如果多个网格共用同一类名，你得挨个查、挨个设，漏一个就样式不一致。
用 setProperty('--col-count', 'n') 替代硬拼字符串
真正该动的不是整条 grid-template-columns，而是抽出来的数值型参数。比如定义：.grid { --col-count: 3; grid-template-columns: repeat(var(--col-count), minmax(200px, 1fr))); }。JS 只需调用：gridEl.style.setProperty('--col-count', '5')。
- 变量必须定义在目标元素选择器内（如
.grid），不能只挂:root后用document.documentElement.style.setProperty -
--col-count值必须是无单位数字（'3'✅，'3px'❌，"3"❌） - 别在 JS 里写
repeat(var(--col-count), 1fr)—— 这语法所有浏览器都静默丢弃，Computed 面板里grid-template-columns会变空
动态列数必须配 minmax()，否则窄屏下内容挤成一团
纯 repeat(var(--col-count), 1fr) 在容器只有 300px 宽、列数固定为 4 时，每列只剩 75px，文本根本没法读。正确写法是把弹性逻辑留在 CSS 里：minmax(200px, 1fr) 确保每列至少 200px，不够时自动收缩但不跌破底线。
- 小屏强制单列？直接在媒体查询里重设变量：
@media (max-width: 480px) { .grid { --col-count: 1; } } - 过渡动画要生效，得给
grid-template-columns加transition，变量变化时轨道宽度才会平滑缩放 - 别忘了显式声明
grid-auto-rows: minmax(40px, auto)，否则新增子项掉进隐式行轨道，高度塌陷或抖动
想“自动适配列数”？优先用 auto-fit + minmax()，别碰 JS
如果你实际要的是“容器变窄时自动减少列数”，而不是“必须等于某个配置值”，那完全不用 JS：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))。浏览器自己算该铺几列，代码更轻、兼容性更好、resize 也更稳。
立即学习“Java免费学习笔记（深入）”；
-
auto-fill：按最小宽度尽可能铺满，空白格子也占位（DOM 存在、视觉为空） -
auto-fit：先尝试铺满，没内容的列会被合并压缩，更适合内容不均的场景 - JS 只在真需要精确控制列数时介入（比如报表固定 3 列），否则就是多此一举
grid-auto-rows 和变量作用域匹配——前者不设，动态加项后高度错乱；后者不对，setProperty 就像往空气里扔指令，怎么调都不生效。 
