直接在媒体查询中用相同或更高优先级选择器重写 grid-template-columns 才生效，推荐用 minmax(300px, 1fr) 替代纯 1fr，并配合 max-width: 100% + overflow-x: hidden 防溢出；IE11 不支持现代 Grid，需用 @supports 或 flex 回退。
grid-template-columns 在媒体查询里怎么改才生效
直接在媒体查询中重写 grid-template-columns 是最稳妥的方式，但很多人写了没反应——大概率是因为选择器优先级不够，或者用了 minmax() + fr 却没配好最小轨道尺寸。
- 必须确保媒体查询内的规则能覆盖原始定义，比如原始写在
.grid { grid-template-columns: 1fr 1fr; }，那响应式就得用相同或更高优先级的选择器重写，别指望它自动继承 -
minmax(300px, 1fr)比纯1fr更可控：小屏下不会把列压到看不见，大屏又能均分剩余空间 - 避免在多个断点里反复用
repeat(auto-fit, minmax(...))—— 浏览器要重新计算轨道，频繁触发 layout，滚动时可能卡顿
移动端优先写法下，如何避免 grid-column-gap 被撑破容器
用 grid-column-gap（或简写 gap）时，如果列数少、间隙值大，加上 padding 或 border，很容易让网格整体宽度超父容器。这不是 bug，是盒模型叠加的必然结果。
- 给网格容器加
box-sizing: border-box，但注意这不解决 gap 溢出问题——gap 是网格内部间距，不受 box-sizing 影响 - 更有效的是用
max-width: 100%+overflow-x: hidden做兜底，尤其在 iOS Safari 中，它对超宽网格的处理不如 Chrome 稳定 - 推荐用相对单位：把
gap设为1rem或2vw，比固定20px更适应不同屏幕
IE11 兼容场景下，grid 媒体查询是否还能用
不能。IE11 完全不支持 CSS Grid 的现代语法，包括 @media 里任何 grid- 开头的属性。强行写进去会被整条规则忽略，降级成块级流布局。
- 如果必须兼容 IE11，得用两套方案：用
@supports (display: grid)包裹 Grid 布局，再用媒体查询写一套 float / inline-block 回退 - 别试图用 Autoprefixer “修复” Grid —— 它对 Grid 属性基本不加前缀，IE11 的
-ms-grid是另一套完全不同的旧语法，无法和现代 Grid 共存 - 真要保 IE11，建议用
display: flex+ 媒体查询做主布局，Grid 只用于局部模块，且明确标注“仅现代浏览器”
用 JavaScript 动态切换 grid 模板时，为什么 resize 监听不灵敏
监听 window.resize 改 style.gridTemplateColumns 看似简单，但实际容易漏掉关键细节：浏览器不会在每次像素级变化都触发，而且样式写入后需要强制重排才能让 grid 重算轨道。
立即学习“前端免费学习笔记（深入）”；
- 别用原生
resize事件——它不冒泡，也不支持元素级监听；改用ResizeObserver，它只在元素尺寸真正变化时回调，更精准 - 修改
gridTemplateColumns后，如果依赖后续 JS 获取列数（比如getComputedStyle(el).gridTemplateColumns），要等下一帧，可用requestAnimationFrame包一层 - 高频 resize 下，记得节流：用
setTimeout延迟执行模板更新，避免连续写样式导致 layout thrashing
minmax() 的下限，或者高估了用户设备的视口稳定性，才是多数“响应失灵”的真实原因。 
