grid-template-areas引号不可省略，否则布局失效；span必须显式声明跨距；gap在旧版flex中无效；dense模式不改变dom顺序且z-index无效。
grid-template-areas 里引号不能少，否则整个布局失效
浏览器解析 grid-template-areas 时，会把没加引号的值当成关键字或变量名处理，结果直接忽略该声明，退回到默认流式布局。常见现象是：你写了三行区域定义，但所有子元素堆在左上角，grid-area 完全不生效。
- 必须用单引号或双引号包裹整行字符串，比如
"header header header" "nav main aside" "footer footer footer" - 每行字符串内用空格分隔区域名，不能用逗号、换行或制表符替代
- 所有
grid-area值必须严格匹配引号内拼写（包括大小写和连字符），错一个字符就断联 - 如果某列不想占位，用
.占位，但也要写在引号里，比如"header . sidebar"
grid-column / grid-row 的 span 语法容易误写成数值字面量
写 grid-column: 2 / span 3 是合法的，但写成 grid-column: 2 / 3 就只跨 1 栏（从第 2 线到第 3 线），不是你想要的“从第 2 线往后占 3 栏”。很多人卡在这儿，以为 span 可省略，其实它明确表达“长度”语义，缺了就变成“终点线编号”。
-
span N表示跨越 N 个网格轨道，起点固定，终点动态计算 -
A / B中的B如果是数字，就是目标线号；如果是span N，才是跨距 - 用
grid-column-end: span 2比写grid-column: auto / span 2更清晰，避免起点歧义 - 注意：
span不支持负数，也不能用变量（css 自定义属性无法在span后直接代入）
gap 在 flex 布局里无效，但有人硬套 Grid 写法导致间距消失
看到 gap 好用，就顺手加到 display: flex 容器上——这是白加。Flexbox 直到 safari 14.1 才开始支持 gap，旧版 chrome/firefox 完全忽略，且无降级提示。结果是：开发时看着正常，一测兼容性，子项紧贴在一起。
- Flex 容器要实现间隙，老办法仍是
margin（注意最后一项多出的外边距）或伪元素 +justify-content: space-between - Grid 容器中
gap对row和column都生效，且不会影响align-content计算逻辑 -
gap不继承，也不触发重排，性能比 margin 更干净 - 如果项目需同时兼容 Flex 和 Grid 的间隙逻辑，建议抽离为 CSS 变量，但实际渲染仍得按 display 类型分别写
grid-auto-flow: dense 导致元素重叠，且无法通过 z-index 控制层叠顺序
启用 dense 后，Grid 会主动把小元素塞进前面留下的空洞里，这本身没问题。但问题在于：它只管位置，不管 DOM 顺序——后写的元素可能被塞到前写元素的网格区域内，视觉上覆盖，但 z-index 失效，因为它们仍在同一层叠上下文，且未触发定位（position: relative 等）。
立即学习“前端免费学习笔记（深入）”；
- 只要没给元素加
position，z-index就不起作用，哪怕用了dense -
dense不改变 DOM 顺序，只改变渲染坐标，所以可访问性和打印样式依然按源序输出 - 适合卡片列表等对顺序不敏感的场景；表单、步骤条、阅读流类内容禁用
- 调试时打开浏览器 Grid overlay，一眼就能看出哪些区域被“填洞”操作覆盖了
事情说清了就结束