grid-template-areas 不能单独实现响应式，必须配合 media query 重定义布局结构，因其仅为静态声明，不随屏幕尺寸变化；移动端优先写单列，再用媒体查询逐级覆盖为多栏布局。
grid-template-areas 不能单独实现响应式，必须配 media query 重定义
很多人写完 grid-template-areas 就以为布局“自动适配”了，结果小屏上侧边栏和主内容硬挤在一起、横向滚动、元素错位——根本原因在于：grid-template-areas 只是一张静态快照，它不感知屏幕尺寸变化。
真正起作用的是媒体查询里对同一容器的多次声明。DOM 元素的 grid-area 值（如 header、sidebar）保持不变，变的只是父容器的 grid-template-areas 结构。
- 移动端优先：先写单列堆叠结构，例如
"header" "nav" "main" "aside" "footer" - 再用
@media (min-width: 768px)覆盖为两栏，如"header header" "nav main" "aside main" "footer footer" - 最后在桌面端用
@media (min-width: 1024px)切三栏，比如"header header header" "nav main aside" "footer footer footer" - 每行字符串列数必须一致，缺位用
.占位；含中划线的区域名（如main-content）会直接让整条声明失效
用 auto-fit + minmax 实现卡片类看板的动态列数
仪表盘里一堆指标卡片，固定列数在 iPad 和手机上不是太挤就是留白太多？这时候别硬套 grid-template-areas，改用 repeat(auto-fit, minmax(320px, 1fr))) 更省事。
它让浏览器自动计算能放几列：最小宽度 320px，超出部分均分。比写三套 media query 更轻量，也更适合内容长度不一的卡片。
-
auto-fit会收缩空轨道，auto-fill则保留空位，多数场景选auto-fit - 配合
gap控制间距，避免小屏下卡片贴边；不要依赖margin，它会破坏网格轨道对齐 - 如果某张卡片需跨多列（如汇总卡），用
grid-column: span 2，但注意它只影响当前断点，跨列行为不会自动响应式继承 - IE 不支持
auto-fit，若需兼容，得 fallback 到媒体查询方案
嵌套 Grid 处理看板中“区域+内部子布局”的混合需求
一个看板区域既要整体按三栏划分，其中某个数据卡片内部还要分标题、图表、操作按钮三块——这时外层用 grid-template-areas，内层卡片自己设 display: grid，就比全塞进一层 grid 简洁得多。
关键点是子网格不继承父网格的轨道，它自建行列体系，且可独立响应式。比如外层在桌面是三栏，但某张卡片内部在小屏仍可堆叠为单列。
- 外层容器定义大区域：
grid-template-areas: "header header" "sidebar main" - 给目标卡片加
display: grid和自己的grid-template-areas，例如"title title" "chart chart" "actions actions" - 子项用
grid-area定位，值仅在该子网格内有效，和外层区域名无冲突 - 避免过度嵌套：三层及以上 Grid 容易失控，优先考虑是否能用
flex或block解决子项内部排布
subgrid 在看板中对齐多层级标题/刻度线时的实际限制
想让多个卡片的 X 轴刻度线或顶部标题严格对齐？subgrid 理论上能让子网格复用父网格轨道，但现实很骨感：Chrome 123+、Firefox 125+ 支持，Safari 17.4+ 才刚起步，iOS Safari 仍不支持。
目前更稳妥的做法是放弃 subgrid，改用显式定义统一的 grid-template-rows 并在所有卡片上复用，或者用 JS 计算后设 min-height 强制对齐。
- 启用 subgrid 的写法是
grid-template-rows: subgrid，但必须父容器已定义grid-template-rows - subgrid 不支持
grid-template-areas，只能复用线号，语义性下降 - 调试时容易误判：浏览器 DevTools 显示“subgrid”字样，但实际渲染可能退化为普通 grid
- 真正需要 subgrid 的场景不多，多数看板用统一行高 + gap 控制就能满足对齐需求
复杂看板最常被忽略的不是语法，而是区域命名的稳定性：一旦上线，grid-area 值就成了 DOM 和 CSS 的契约，改一个名字就得同步更新所有 media query 和 JS 查询逻辑。与其后期重构，不如一开始就把区域名定死、写全注释、禁用中划线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
