最干净的响应式列数切换方案是直接在媒体查询中修改grid-template-columns，移动端用1fr、PC端用repeat(3,1fr)或1fr 1fr 1fr，并同步调整gap、子项尺寸及兼容性处理。
用 grid-template-columns 在 media query 里切换列数
直接改 grid-template-columns 是最干净的方案，不需要动 grid-template-areas 或重写整个布局。移动端单列就是 1fr，PC端三列常见写法是 repeat(3, 1fr) 或带间隙的 1fr 1fr 1fr。
注意：不要在媒体查询里只改 grid-template-rows 或只加 grid-auto-flow，那不会触发列结构变化。
- 必须确保容器本身是
display: grid，且没有被其他规则（比如inline-grid）覆盖 - 如果用了
grid-template-areas，列数变化后要同步更新区域定义，否则会报Invalid property value - Firefox 对
minmax(auto, 1fr)在响应式中重计算稍慢，建议 PC 端优先用明确数值如minmax(320px, 1fr)
别漏掉 grid-gap 的响应式适配
grid-gap（或 gap）不是自动随列数缩放的。移动端小屏用 gap: 8px 合理，但 PC 端列变多、内容变宽，gap: 24px 才不显拥挤——这个值得手动在 media query 里改。
- 老项目若还在用
grid-column-gap/grid-row-gap，请统一换成gap，后者在媒体查询中更稳定 - 如果子项用了
grid-column: span 2，PC 端 gap 加大后可能撑出横向滚动，需检查min-width或加overflow: hidden -
gap不影响grid-template-columns计算，但会影响整体宽度占用，调试时用浏览器“网格叠加层”功能（DevTools → Layout → Grid overlay）一眼就能看出是否溢出
IE11 兼容？放弃 grid-template-columns 响应式，改用 @supports
IE11 完全不支持 @media 内修改 grid-template-columns，哪怕写了也无效。真要兼容，得用 @supports (display: grid) 包一层，把 Grid 布局逻辑完全隔离。
- 别试图用
max-width+grid-template-columns混合写法骗过 IE，它解析到第一个不支持的声明就整条规则丢弃 - 可以给 IE 单独写一套
float或inline-block回退，但注意：IE 下grid-column-end: -1会直接失效，得用grid-column: 1 / -1这种完整语法 - 如果项目已用 PostCSS autoprefixer，确认配置里没开启
grid: "no-autoplace"，否则它会把现代写法转成 IE 友好但不可响应的静态网格
为什么有时改了 grid-template-columns 但列没变？
大概率是子项设置了固定 width 或 min-width，强行卡住网格轨道分配。Grid 布局中，子项的固有尺寸会参与轨道计算，尤其当 grid-template-columns: 1fr 1fr 遇上一个 min-width: 600px 的卡片时，第一列会被撑满，第二列直接消失。
- 临时调试：给子项加
max-width: 100%和box-sizing: border-box，看是否恢复 - 更稳妥的是用
minmax(0, 1fr)替代1fr，强制允许压缩（但注意 Safari 旧版本对0支持不稳定） - 如果用了
grid-auto-fit+minmax()，记得媒体查询里也要同步调整minmax()的第一个参数，比如从minmax(280px, 1fr)改成minmax(360px, 1fr)
改 grid-template-columns 本身很简单，难的是子项尺寸、gap、兼容性、浏览器渲染时机这四点咬在一起。每次改完，务必在真机 Safari、Chrome Android、Edge 最新版下拖动窗口连续看三次——中间卡顿或闪跳，八成是某个 minmax 或 gap 没对齐视口断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
