在媒体查询中直接重写grid-template-columns即可覆盖默认值，注意选择器权重和断点条件正确；推荐移动端优先，默认1fr，大屏改repeat(3,1fr)；auto-fit+minmax可动态列数但无法替代确定列数需求。
grid-template-columns 在媒体查询中怎么改
直接在 @media 块里重写 grid-template-columns 就行，它会覆盖默认值。Grid 的列定义不继承，也不需要额外清空，只要选择器权重够、作用范围对，新规则就会生效。
常见错误是把媒体查询写在容器外层或拼错断点条件，比如用 max-width: 768px 却忘了加单位，或者漏掉 screen and 前缀（虽然部分浏览器能容错，但不保险）。
- 移动端优先：默认设为
grid-template-columns: 1fr，再在大屏媒体查询里改成repeat(3, 1fr) - 桌面优先：默认设多列，用
max-width降级到单列 - 注意
min-width和max-width的边界重叠问题，比如(max-width: 768px)和(min-width: 769px)中间不留缝，但写成768px和768px就会冲突
用 repeat() + minmax() 自动适配列数是否更省事
是的，repeat(auto-fit, minmax(300px, 1fr)) 这类写法能在不写媒体查询的情况下动态调整列数，但得清楚它的行为边界：
-
auto-fit会合并空轨道，auto-fill则保留空占位——多数场景用auto-fit -
minmax(300px, 1fr)表示每列至少 300px，剩余空间均分；如果容器宽 800px，最多放两列（600px），第三列塞不下，就不会出现 - 它不能替代所有媒体查询：比如你要求「768px 以上必须是 2 列，1024px 以上必须是 4 列」，那就得靠明确的
@media控制，auto-fit给不出确定列数
媒体查询里改 grid-column-end / grid-row 不起作用？
起作用，但容易误判。单独改某个子项的 grid-column-end 或 grid-row 只影响该元素布局，不会改变整个网格的轨道数量或位置逻辑。如果你发现“没变化”，大概率是因为：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: grid，子项的 grid 属性被忽略 - 媒体查询的选择器没命中目标元素（比如写了
.item却忘了加.container上的类名） - 用了
grid-column: span 2，但在小屏下容器宽度不够，导致内容溢出或换行异常——这时要配合grid-auto-flow: dense或调整grid-template-rows
IE11 兼容时 grid + 媒体查询要注意什么
IE11 的 Grid 实现是旧版语法（2012 规范），不支持 repeat()、minmax()、auto-fit，媒体查询本身没问题，但里面的 Grid 声明要降级：
- 用
-ms-grid-columns: 1fr 1fr 1fr替代grid-template-columns: repeat(3, 1fr) - 子项用
-ms-grid-column: 2而不是grid-column: 2 - 媒体查询内必须重复写完整前缀声明，不能只写新语法再指望 fallback —— IE11 完全无视无前缀的 Grid 属性
- 别依赖
gap，IE11 不支持，得用margin模拟
真正麻烦的不是写法，而是当你要同时满足现代 Grid 行为和 IE11 显示时，往往得准备两套布局逻辑，甚至用 @supports (display: grid) 包一层来隔离。
