grid-template-areas 仅定义命名区域，需子元素设置 grid-area 才生效；父容器必须为 display: grid；区域名须严格匹配；响应式需用 @screen 包裹整条规则；不可与 repeat(auto-fit) 混用。
grid-template-areas 必须配合 grid-area 才生效
只写 grid-template-areas 不会自动把子元素塞进对应区域——它只是定义了“地图”，每个格子叫什么名字；真正让元素落位的是子元素上的 grid-area。漏掉这一步，布局完全不动，DevTools 里也看不出报错，容易误以为 CSS 没加载。
常见错误现象：grid-template-areas: "header main" "footer footer" 写了，但所有子元素没加 grid-area，结果还是默认流式排列。
- 父容器必须设
display: grid，否则grid-template-areas被忽略 - 每个
grid-area值必须严格匹配grid-template-areas中的字符串（大小写、空格、引号全要一致） - 未被命名的区域（比如留空用
"."）不能被grid-area引用，否则该元素不渲染
响应式切换 grid-template-areas 得用 @screen 包裹整个规则
Tailwind 的 @screen 是媒体查询封装，但它不能直接插在 grid-template-areas 值里。你得把整条声明包进断点规则中，否则编译后无效。
错误写法：grid-template-areas: "header header" @screen md: "sidebar main" → Tailwind 不识别，CSS 语法错误。
立即学习“前端免费学习笔记（深入）”；
- 正确结构是：先写基础布局，再用
@screen md { grid-template-areas: "sidebar main" } - 多个断点需分别包裹，不能合并成一个 media 查询块（Tailwind v3.4+ 不支持嵌套 media）
- 如果用了
grid-areas-header-main-footer这类自定义工具类，确保它内部已包含@screen块，否则断点不触发
避免 HTML 里堆砌 col-span-2 row-span-3 等定位类
用 grid-area + grid-template-areas 的本意是语义化布局，一旦在 HTML 标签上补一堆 col-span-2、row-start-3，就退回了“坐标式”思维，反而更难维护。
典型场景：想让 sidebar 在小屏占满一行、大屏靠左，若用 col-span-12 md:col-span-3，后续改区域名或增删断点时，HTML 和 CSS 两头都要动。
- 统一用
grid-area: "sidebar"，断点只改grid-template-areas字符串 - 区域名建议用业务语义（
"hero","cta"），别用位置描述（"left-col"） - 若某区域需跨多行/列，直接在
grid-template-areas字符串里重复写名字，比如"sidebar sidebar" "main main"
动态列数（如 repeat(auto-fit, minmax(300px, 1fr))) 和 grid-template-areas 不能混用
grid-template-areas 是显式网格，轨道数和名称都固定；而 repeat(auto-fit, ...) 是隐式网格，列数随容器宽度动态变化。两者逻辑冲突，强行组合会导致区域错位或空白。
例如：grid-template-areas: "a b c"; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) → 容器变窄时列数减少，但 "a b c" 仍强制三列，右侧区域被挤出视口。
- 需要响应式列数 → 放弃
grid-template-areas，改用grid-cols-1 md:grid-cols-2 lg:grid-cols-4+grid-area定位 - 需要强语义区域控制 → 固定列数，用
@screen切换整套grid-template-areas - Tailwind v3.4+ 的任意值语法
grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))]仍不兼容grid-template-areas，空格转义只是解决编译问题，不解决语义冲突
