真正自适应列数需用 repeat(auto-fit, minmax(300px, 1fr)))，auto-fit 收缩空轨道，minmax 控制最小宽度；CSS 变量应只控制最小列宽（如 --col-min），避免直接用于 repeat() 参数；IE11 不支持，需 @supports 降级为 Flexbox。
用 grid-template-columns + minmax() 实现真正自适应的列数
固定列数（比如 grid-template-columns: repeat(3, 1fr)）在小屏上会挤成一坨，不是响应式，是“假装响应式”。真响应式得让列数随容器宽度自动增减。
核心做法是用 repeat(auto-fit, minmax(300px, 1fr)))：
-
minmax(300px, 1fr)表示每列最小 300px，大了就均分剩余空间 -
auto-fit会让空余轨道自动收缩消失，从而“挤出”更多可用列 - 换成
auto-fill就会保留空轨道，导致左侧对齐、右侧留白，多数场景不想要
别硬记数值——300px 是内容可读性的经验下限，图文卡片类通常够用；文字密集型可压到 250px，仪表盘类可能要 350px+。
CSS 变量怎么安全地控制 grid-template-columns
CSS 变量不能直接塞进 repeat() 里当参数，写成 repeat(var(--cols), 1fr) 会完全失效（浏览器无视整条声明）。必须靠 calc() 或媒体查询兜底。
立即学习“前端免费学习笔记（深入）”；
推荐方案是「变量只控最小列宽，列数由 auto-fit 推导」：
- 定义变量：
:root { --col-min: 280px; } - 使用时：
grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr))); - 这样改
--col-min就能全局调节列数阈值，且兼容所有现代浏览器 - 如果非要变量控列数（比如后台配 2/3/4 列），就得 JS 注入内联样式或用
@property（仅 Chrome 115+ 支持，慎用）
IE11 兼容？别挣扎了，但可以优雅降级
grid-template-columns 在 IE11 里只支持非常原始的语法（无 minmax、无 auto-fit），强行加前缀也跑不通。这时候硬兼容只会让代码臃肿、维护崩溃。
- 真实项目中，优先用
@supports (display: grid)包住 Grid 布局，里面写现代写法 - 外面写 Flexbox 降级：比如
display: flex; flex-wrap: wrap;+flex-basis: 300px; - 注意 Flexbox 降级时，
flex-basis不等于 Grid 的最小列宽——它受父容器 padding 和 box-sizing 影响更大，务必实测 - 如果项目仍需支持 IE11，建议整个布局层回归 float 或 inline-block，Grid 就当不存在
性能陷阱：过多的 minmax() + 频繁 resize
当容器内有几十个 Grid 子项，又开着 DevTools 或用户狂拖窗口大小时，minmax() 触发的重排会明显卡顿——尤其在低端安卓 WebView 里。
- 避免在
body或全屏容器上直接用auto-fitGrid，尽量限制在局部模块 - 用
resize: horizontal测试时，加个防抖：监听resize后等 100ms 再更新变量（如果用了 JS 控制） - 真遇到性能瓶颈，把
minmax(300px, 1fr)换成minmax(300px, max-content)，牺牲一点弹性换渲染速度 - 别忘了：Grid 列数变化本身不触发重绘，但子项尺寸变、文字折行、图片重缩放才会——优化重点在内容，不在 Grid 声明本身
变量控制列布局的关键，从来不是“怎么写”，而是“在哪写”和“写多细”。一个根变量管全局最小列宽，比十个组件级变量各自为政靠谱得多。至于那些非得用 JS 动态算列数的场景，大概率是设计没想清楚容器边界。
