css grid 中 grid-template-areas 须用合法英文标识符，中文名会导致声明失效；区域名需与 grid-area 严格匹配；行字符串等长并用“.”占位；侧边栏宽度应使用 minmax(300px, 1fr) 而非纯 fr；gap 会扩大实际空间且不兼容 ie；响应式切换布局时须同步更新 grid-area 值。
grid-template-areas 里名字写错就完全不生效
很多人写 grid-template-areas 时直接复制设计稿里的“推荐栏”“正文”这种中文名，结果布局塌成一列——CSS Grid 不认中文标识符，只接受合法的 CSS 标识符（字母开头、可含短横线和数字）。"sidebar content" 可以，"侧边栏 主内容" 会整个声明被浏览器忽略。
- 必须用纯英文或带短横线的命名，比如
"aside main"或"rec-column article" - 每个区域名在
grid-template-areas中出现几次，对应区域就得用grid-area匹配几次；漏一个grid-area，那个格子就空着 - 所有行字符串长度要一致，缺位用
"."占位，否则整条声明无效
minmax(300px, 1fr) 和 1fr 在侧边栏上表现完全不同
想让侧边栏最小 300px、剩余空间给主内容，写成 grid-template-columns: 1fr 3fr 看似合理，但一旦主内容变短，侧边栏会被压缩到文字撑不开的程度。真正可控的是 minmax()。
-
grid-template-columns: minmax(300px, 1fr) 1fr：左侧至少 300px，有富余时可伸展；右侧始终占剩余空间 - 别用
fr单独控制侧边栏宽度，它没下限，窄屏下可能缩成 20px - 如果侧边栏内容是固定高度卡片（如推荐列表），加
align-items: start防止它被拉高撑开整行
gap 导致侧边栏和主内容错位的隐形原因
加了 gap: 16px 后，发现侧边栏顶部比主内容高一截，检查半天没找到 margin 或 padding ——其实是 gap 只作用于 grid track 之间，不包括容器内边距。当主内容有标题 h1 默认上下 margin，而侧边栏第一项是无 margin 的 div，视觉就错位了。
- 统一清除子元素默认外边距：
* > :first-child { margin-top: 0; }或显式重置h1 { margin-top: 0; } -
gap不影响grid-area定义的位置，但会扩大实际占用空间，响应式断点需按含 gap 的总宽计算 - IE 不支持
gap，如果还要兼容，得回退到padding+margin模拟，且侧边栏需设box-sizing: border-box
媒体查询里重定义 grid-template-areas 容易漏掉 grid-area
桌面端用 "aside main"，移动端想改成上下结构 "main" "aside"，只改 grid-template-areas 不够——原来给 aside 设的 grid-area: aside 还在，但新模板里没有 aside 这个区域名，它就会掉出网格流，变成普通块级元素堆在顶部。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中重定义
grid-template-areas时，必须同步确保每个区域都有对应grid-area值匹配新名字 - 更稳妥的做法：移动端直接换布局逻辑，用
display: block覆盖 grid，避免区域名冲突 - 调试时用浏览器的网格叠加层（DevTools → Layout → Grid overlay），一眼看出哪些项没被纳入任何区域
侧边栏高度随主内容浮动是常态，但靠 align-content: start 拉齐只是表象；真正要稳，得控制内部元素的基线行为和最小高度触发条件。