grid-template-areas 必须每行引号内列数一致且区域名与 grid-area 定义匹配，如"header header""main main""footer footer"；区域名禁用空格、横线、数字开头；未引用的区域名被忽略。
grid-template-areas 怎么写才不报错
写错 grid-template-areas 是初学 Grid 最常卡住的地方——浏览器不报错，但布局完全不生效。核心就一条：每个引号内的字符串，列数必须严格一致，且所有区域名必须在 grid-area 中有对应定义。
- 错误写法：
grid-template-areas: "header header" "main" "footer";（第二行只有一列，和第一行两列对不上） - 正确写法：
grid-template-areas: "header header" "main main" "footer footer";（每行 2 列，空格只是对齐，不影响解析） - 区域名里不能有空格、横线或数字开头，比如
"user-info"会失效，得改成"userinfo" - 未被引用的区域名不会自动创建，也不会报错，只是被忽略
gap 和 margin 混用时为什么间距不对
gap 是 Grid 容器专属的行列间距控制，它不作用于子元素的 margin，但会和 margin 叠加——这是最易踩的坑。
- 如果子元素设置了
margin: 10px，容器又设了gap: 16px，那两个相邻项之间的实际距离是10px + 16px + 10px = 36px（不是取大值） - 想让间距干净可控，建议统一用
gap，子元素margin设为0 -
gap不支持百分比值；用em或rem时，它基于容器字体大小，不是子项的
grid-column / grid-row 的数值怎么数
Grid 线（line）编号从 1 开始，从左到右、从上到下，无论有没有显式定义轨道。容易误以为“第 1 列”是第一个内容区域，其实它是容器左边缘那条线。
-
grid-column: 1 / 3表示从第 1 条线开始，到第 3 条线结束 → 跨越前两个列轨道 - 负值从末尾反向计数：
grid-column: -2 / -1是倒数第二条线到最右边那条线 - 用名称更安全：
grid-column: sidebar / content，前提是已用grid-template-columns定义了这些名字 - 写成
grid-column: 2是简写，等价于2 / 3，只占一个轨道；别误以为它会自动撑满剩余空间
IE11 兼容性问题到底要不要管
IE11 支持的是旧版 Grid 语法（2011 年草案），和现行标准几乎不兼容。如果你的项目还要求支持 IE11，display: grid 基本等于不能用。
- 旧版写法如
display: -ms-grid、-ms-grid-column，和现代语法无法共存，得整套重写 - Autoprefixer 对 Grid 属性基本不加前缀，它明确放弃 IE11 Grid 兼容
- 真正能跨浏览器的“网格感”，往往靠
flexbox+ 固定列数模拟，或者用 CSS-in-JS 库动态降级 - 现在多数内部系统或新项目已可明确声明不支持 IE11，但得确认 CI 流程和用户统计——这点容易被跳过，结果上线后才发现监控报警
Grid 的简洁性全建立在现代解析器上，一旦要兜底旧环境，所有区域划分、响应式断点、甚至 fr 单位都得重新评估。别在联调最后一天才发现设计稿里的三栏布局在 IE 里叠成一柱擎天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
