grid-template-columns 单独修改常因选择器权重不足或断点单位缺失（如漏写 px）而失效；grid-template-areas 必须整行重写，不可局部修改；repeat(auto-fit, minmax()) 需注意最小宽、子项宽度冲突及 auto-fit/auto-fill 差异；gap 值须在各断点显式重设，避免塌缩或溢出。
为什么只改 grid-template-columns 有时不生效
常见现象是写了 @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }，但小屏下还是多列。根本原因不是语法错，而是选择器权重不够或断点单位缺失。比如默认样式用的是 .container.grid，而媒体查询里只写 .grid，就会被覆盖失败；又或者漏了 px，写成 @media (max-width: 768)，浏览器直接忽略整条规则。
稳妥做法是：媒体查询里的选择器和默认样式保持完全一致；断点统一用 screen and (max-width: 768px)，兼容旧版 Safari 和部分安卓 WebView。
grid-template-areas 必须整块重写，不能局部修改
当你用 grid-template-areas: "header header" "nav main" "footer footer" 定义了三行两列结构，想在移动端改成单列堆叠，不能只改列数或只删掉 nav 区域——必须完整重写整条规则：
.container {
grid-template-areas:
"header"
"main"
"footer";
}
否则浏览器会因格式错误（比如某行单词数不一致）直接丢弃该声明。另外注意：grid-area 的值大小写敏感，grid-area: Header 和 grid-area: header 是两个不同区域。
用 repeat(auto-fit, minmax()) 替代部分媒体查询时的坑
这个组合能自动算出最多放几列，但容易忽略三个硬性约束：
-
minmax(250px, 1fr)中的250px是最小宽度，若容器宽 700px，它最多撑出 2 列（2 × 250 = 500），第三列会换行，但不会强行压缩到 233px； - 子元素若设了
width: 300px，会顶破minmax()的弹性逻辑，优先用max-width或不设宽； -
auto-fit会折叠空轨道，auto-fill则保留空白列占位——卡片列表几乎 always 用auto-fit，否则小屏下出现“看不见的列”导致内容偏左。
gap 值在断点间要同步调整
gap 不是自适应单位，gap: 2rem 在窄屏下可能让内容挤出容器，尤其当子项用了 padding 或 border。更安全的做法是在每个关键断点里显式重设：
@media (max-width: 768px) { .grid { gap: 1rem; } }
别依赖继承，也别指望 gap 自动缩放。如果用的是 % 单位，小屏下间隙可能塌缩到不可见，一律改用 rem 或 px。
真正难的不是写多少媒体查询，而是判断哪些网格属性必须成组更新——列数变了，grid-auto-flow、grid-template-rows、grid-template-areas 很可能都要跟着动，漏掉一个就容易在某个断点上突然错行或重叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
