Grid容器必须设为display: grid，否则媒体查询无效；父容器未声明该属性时，grid-template-columns等响应式设置均不生效，必须先确保基础样式中定义display: grid或inline-grid，后续所有断点调整才有效。
Grid容器必须设为display: grid，否则媒体查询无效
很多人写完 @media 规则后发现网格没变，根本原因是父容器没声明 display: grid。CSS Grid 是显式布局系统，不靠文档流自动触发，grid-template-columns 等属性只在 display: grid 或 display: inline-grid 下生效。
常见错误现象：grid-template-columns: repeat(3, 1fr) 在小屏下没变成 1fr 单列，是因为整个断点规则被忽略——容器仍是 display: block。
- 务必在基础样式里先写
.grid-container { display: grid; } - 所有响应式调整都基于这个前提，否则后续设置全是空转
- 不要依赖“隐式网格”（比如只设
grid-column而不设容器 display）
用minmax() + auto-fit组合替代固定列数，避免小屏溢出
硬写 grid-template-columns: repeat(4, 1fr) 在手机上会强制撑开、触发横向滚动条。真正适配的写法是让列数随容器宽度自动收缩：
推荐写法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
立即学习“前端免费学习笔记（深入）”；
-
minmax(300px, 1fr)表示每列最小 300px，最大占满剩余空间 -
auto-fit会在容器不够时丢弃空列，而不是强行压缩 - 比
auto-fill更实用：它不会预留看不见的空白轨道 - 300px 可按实际内容调整，卡片类常用 280–320px，文字区块可设 400px+
grid-area命名 + 媒体查询重排，比单纯改列数更可控
当不同设备需要完全不同的模块顺序（比如移动端把侧边栏移到底部），仅调列数不够。这时应提前命名区域，再在断点中重新分配：
基础定义：grid-template-areas: "header header" "main sidebar" "footer footer"
小屏重排：@media (max-width: 768px) { .grid-container { grid-template-areas: "header" "main" "sidebar" "footer"; } }
- 每个
grid-area名称需对应子元素的grid-area属性值 - 区域名用引号包裹，换行即换行，空格分隔列，换行分隔行
- 重排时不改动 HTML 结构，纯 CSS 控制视觉顺序，语义和 DOM 保持一致
- 注意：IE 不支持
grid-area命名，如需兼容需另作 fallback
gap属性在媒体查询中要单独重置，别指望继承
gap 是独立于 grid-template 的属性，不会随列数变化自动缩放。小屏下如果保留大 gap，会导致内容被挤出视口。
- 大屏常用
gap: 2rem，小屏建议降到gap: 1rem或gap: 0.5rem - 别写成
gap: 2rem / 1rem—— 这不是合法语法，必须分开写row-gap和column-gap或在媒体查询里覆盖整个gap - 若使用
gap: clamp(0.5rem, 2vw, 1.5rem)，注意部分旧浏览器不支持 clamp()，需提供降级值
grid-template-areas + grid-area 才是控制信息层级的核心手段。 
