grid-template-areas是实现复杂区域布局最可控的方式，但常因每行区域数不一致、缺占位符“.”、区域名不合法、grid-area值不匹配或父容器未设display: grid而静默失效。
grid-template-areas 是实现复杂区域布局最可控的方式，其他写法容易错位、失效或响应式失灵。
grid-template-areas 为什么总不生效？
它不报错，但浏览器会静默丢弃整条声明——常见原因有：
• 每行区域名数量不一致，比如 "header header" 和 "footer" 混用 → 第二行只有一列，模板直接作废
• 用空格或空字符串代替占位符 .，必须写成 "header header" "nav main" "footer ."
• 区域名含短横线（如 user-list），CSS 只认合法标识符，改用 user_list 或 userlist
• grid-area 值带引号（grid-area: "main"）或大小写/拼写不匹配（grid-area: Main ≠ main）
• 父容器没设 display: grid，或者漏了 grid-template-columns/grid-template-rows，导致行列数与模板对不上
如何让 col-span / row-span 在嵌套网格里真正起作用？
根本问题在于：Tailwind 的 col-span-2 编译为 grid-column: span 2，但若父容器没定义显式列轨道（即没设 grid-cols- 或 grid-template-columns），浏览器按隐式网格计算，结果不可控。
• 每一层网格容器都必须显式声明列/行划分，哪怕只是占位，例如 grid-cols-12 或 grid-template-columns: repeat(12, 1fr)
• 避免混用 grid-flow-col 和 grid-cols-，后者会被覆盖
• 嵌套时内层容器不能依赖外层继承，必须独立加 grid + 列/行定义
• 如果用 grid-template-areas，子项的 col-span 无效，得靠区域命名和 grid-area 控制位置
响应式切换 grid-template-areas 时要注意什么？
媒体查询中改模板，但子元素的 grid-area 不同步更新，布局就塌了——因为新模板里找不到旧名字，元素退回流式排列。
• 每个断点下的 grid-template-areas 值必须用单引号包裹整个声明，每行用双引号，例如：md:grid-template-areas: '"nav main" "nav aside"'
• 子元素的 grid-area 值必须在对应断点下仍存在于模板中；如果名字变了（比如桌面端叫 sidebar，移动端改叫 drawer），就得同步改 HTML 或 CSS 中的 grid-area
• grid-rows 和 grid-cols 必须匹配当前模板的行列数，否则区域对不齐
• Tailwind 的响应式前缀（如 sm:grid-cols-5）对自定义键名无效，需在 tailwind.config.js 里单独为每个断点定义，例如 'sm:5' 和 'md:7'
gap 为什么不能用 margin 替代？
gap 修改的是网格容器的 gap 属性，不占布局空间、不影响轨道计算；而 margin 是子元素自身属性，会干扰 auto-fit 的列数推算，也容易在响应式重排时产生意外空白。
• gap-x- / gap-y- 能精准控制方向，比混合 mb-4 mr-4 更可靠，且支持 place-items 统一控制对齐
• 当子项跨格（col-span-full）时，margin 会破坏网格项之间的视觉对齐，gap 不会
• grid-flow-dense 下 gap 仍生效，但跨格项可能导致视觉间隙不均，调试时建议先关掉 flow-dense
立即学习“前端免费学习笔记（深入）”；
复杂点不在语法本身，而在模板、区域名、行列定义、响应式断点这四者的严格对齐——差一个点，整个布局就静默失效。
