正确做法是用css变量接管grid-template-columns并搭配auto-fit：将列数设为--col-count变量，js动态设置element.style.setproperty('--col-count', count)，css中写repeat(auto-fit, minmax(240px, 1fr))，让浏览器自主计算实际列数。
用CSS变量接管grid-template-columns，别碰字符串拼接
直接在JSX或模板里写style={{ gridTemplateColumns: `repeat(${count}, 1fr)` }}是危险操作：它会覆盖minmax()弹性逻辑，小屏下子项被压成一条细线；更严重的是，媒体查询无法覆盖这个内联样式，gap和justify-content可能失效。正确路径是把列数抽成CSS变量，让样式层自己响应变化。
Vue中推荐在组件根元素上绑定：this.$el.style.setProperty('--col-count', count)；React中用ref拿到DOM后调用element.style.setProperty('--col-count', count)。注意变量值必须是纯数字（如4），不能是字符串"4"，否则repeat(var(--col-count), ...)会解析失败。
repeat(var(--col-count), minmax())必须搭配auto-fit才真正动态
只写repeat(var(--col-count), minmax(240px, 1fr))仍会卡死——当--col-count固定为5但容器宽度只有800px时，每列被迫压缩到160px，违背最小宽度约束。关键要让浏览器保留协商权：
- 必须用
auto-fit或auto-fill替代数字，比如repeat(auto-fit, minmax(240px, 1fr)) -
--col-count只作为“上限提示”，实际列数由auto-fit根据容器宽度重新计算 - 若需强制最多4列，可在CSS中加
@media (min-width: 1200px) { .grid { --col-count: 4; } }，媒体查询优先级高于JS设置
动态增删子项时，grid-auto-rows比grid-template-rows更可靠
用v-for或map()渲染列表时，如果显式写了grid-template-rows: repeat(3, 1fr)，新增第4个子项就会掉进隐式行轨道，默认高度是auto，视觉上可能“消失”或突然撑开。解决方案是放弃预设行数：
- 统一用
grid-auto-rows: minmax(40px, auto)，保证每行有最小可读高度，内容多时自动撑开 - 若父容器高度固定（如弹窗内网格），改用
grid-auto-rows: 1fr均分空间 - 绝对避免
grid-template-rows: repeat(var(--row-count), 1fr)——行数极少需要JS控制，且易与列逻辑耦合
Vue/React中监听容器尺寸变化的轻量方案
用户拖拽调整侧边栏、切换设备模拟器时，网格需实时响应。不要用ResizeObserver手动重算列数再setProperty——这容易触发layout thrashing。现代做法是：
- CSS层完全不依赖JS尺寸判断，靠
repeat(auto-fit, minmax(...))原生响应 - 仅在必须干预时（如后台系统中用户手动拖动分隔线），用
ResizeObserver触发setProperty('--col-count', newCount)，且只更新变量，不重写整个grid-template-columns - React中可用
useResizeObserver自定义Hook封装，Vue中用v-resize指令或onMounted+onUnmounted管理观察器生命周期
真正难的不是怎么改，而是忍住不去动grid-template-columns字符串——浏览器比你更懂怎么分配空间。变量只是“提示”，auto-fit才是决策者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
