直接在@media里重写grid-template-columns即可覆盖默认值，关键在于确保选择器权重足够、断点单位正确（如max-width: 768px）、避免边界冲突，并配合gap、grid-auto-rows等同步调整以保障布局一致性。
直接在@media里重写grid-template-columns就行
Grid 的列定义不继承，也不需要清空或重置，只要媒体查询里的选择器能命中目标容器，新声明就会覆盖默认值。关键不是“怎么覆盖”，而是“怎么确保它真生效”：
- 检查断点单位：写
@media (max-width: 768px)，别漏px；用screen and (max-width: 768px)更稳妥，部分旧浏览器会忽略无screen and前缀的写法 - 确认选择器权重：如果默认样式用了
.container.grid，媒体查询里只写.container可能被覆盖失败，保持一致或加权 - 避免边界重叠：比如
(max-width: 768px)和(min-width: 769px)之间不留缝，但若两个都写768px，768px这个宽度会同时匹配两者，造成冲突
repeat(auto-fit, minmax())能省掉大部分媒体查询，但有明确限制
这种写法适合“列数随容器宽度自然增减”的场景，比如卡片列表、图标栅格。但它不是万能替代：
-
minmax(300px, 1fr)表示每列至少 300px，容器宽 850px 时最多放两列（600px），第三列塞不下就不会出现——这不是 bug，是预期行为 - 如果你的设计稿明确要求「768px 屏幕必须 2 列、1024px 以上必须 4 列」，
auto-fit做不到确定列数，必须用@media -
auto-fit会合并空轨道，auto-fill则保留空占位；多数响应式卡片用auto-fit更合理
移动端优先时，默认设1fr，大屏再加列
这是最不容易出错的起点。小屏先保证可读性，再逐步增强大屏信息密度：
- 默认：
grid-template-columns: 1fr;（单列堆叠） - 平板（769px–1024px）：
grid-template-columns: repeat(2, 1fr); - 桌面（≥1024px）：
grid-template-columns: repeat(3, 1fr);或2fr 1fr 1fr等比例分配 - 别忘了
gap也要响应式调整：小屏用gap: 8px，大屏可放大到16px或24px
IE11 兼容时，@media里的 Grid 声明要降级
IE11 支持媒体查询本身，但它的 Grid 是旧版语法（2012 规范），不识别repeat()、minmax()、auto-fit等现代特性：
立即学习“前端免费学习笔记（深入）”；
- 用
-ms-grid-columns: 1fr 1fr 1fr代替grid-template-columns: repeat(3, 1fr) - 子项用
-ms-grid-column: 2代替grid-column: 2 - 媒体查询块内所有 Grid 相关声明都得单独写一遍降级版本，不能混用新旧语法
- 如果项目已放弃 IE11，就别加这些冗余代码——它们不会被现代浏览器解析，纯属白写
grid-template-areas配合@media切换布局时，区域名拼错一个字母，整个网格就错位；或者gap设成rem单位却忘了根字体大小在不同断点下是否一致。这些细节不报错，但布局会悄悄崩。 
