grid-template-areas 是仪表盘结构设计的起点，必须配合 grid-template-rows 和 grid-template-columns 使用，命名区域需一致、用 . 占位，移动端响应式须用媒体查询重写整套区域结构，嵌套 grid 替代百分比宽度，subgrid 仅限现代浏览器支持。
grid-template-areas 是仪表盘结构设计的起点，不是可选项
硬写 grid-column: 2 / 4 或 grid-row: 1 / -1 定位卡片，在新增模块或改高度后极易偏移——你数错一条线，整个主内容区就掉到页脚下面。命名区域把布局“画”出来，HTML 元素只管填空，不耦合行列编号。
实际做法：
-
grid-template-areas字符串每行单词数必须一致，缺位用.占位（比如"header header ."） - 区域名只能含字母、数字、下划线，
main-content会失效，得写成main_content - 所有子元素统一设
grid-area，值严格匹配字符串里的词，大小写敏感 - 容器必须同步定义
grid-template-rows和grid-template-columns，否则未声明维度会回退默认行为，导致高度失控
移动端响应式不能靠 JS 重排，必须用媒体查询重写 grid-template-areas
很多团队在小屏下用 JS 切换 class 或删 DOM，结果 SSR 渲染不一致、状态丢失、页面闪一下。CSS 原生就能收口，关键是整套区域结构重写，而不是只调某一行。
典型错误写法：@media (max-width: 768px) { .dashboard { grid-template-areas: "header" "nav" "main"; } } —— 缺了 grid-template-rows 和 grid-template-columns，浏览器按默认单列渲染，但行高没约束，main 可能撑满全屏。
正确写法要点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先写移动端单列结构，再用
@media (min-width: 769px)覆盖桌面端 - 每个断点内，
grid-template-areas、grid-template-rows、grid-template-columns必须同时出现 - 小屏建议用
auto行高 +1fr主区域，避免溢出；桌面端再切分固定列宽，如240px 1fr 320px
主内容区嵌套 Grid 卡片网格，别用 width: 33.333%
写死百分比宽度是响应式灾难：小屏文字换行撑开卡片、空数据时卡片塌缩、高度不一致导致错位。嵌套一层 Grid 才真正可控。
推荐方案：
- 外层
.main设为display: grid，内部卡片容器用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 加
gap: 1.5rem统一间距，别混用margin - 卡片自身不设宽高，靠父容器轨道分配空间；若需最小高度，用
min-height: 200px，不是height - 避免在卡片内再用 Flex 布局撑满——Grid 已经负责分配，Flex 容易和轨道冲突
subgrid 对齐多层图表与指标卡片时，注意浏览器兼容性
想让多个卡片内的图表标题、Y轴刻度、时间轴完全对齐？subgrid 是唯一原生方案，但它目前仅被 Chromium 115+、Firefox 115+ 支持，Safari 尚未落地。
实操判断：
- 若项目需支持 Safari 或旧版 Edge，放弃
subgrid，改用 CSS 变量统一字号/行高/padding，或 JS 计算后注入 style - 启用时，父网格必须显式定义
grid-template-rows或grid-template-columns，子网格才可继承轨道 -
grid-row: subgrid和grid-column: subgrid要分开写，不能简写为grid: subgrid - 调试时检查 DevTools 的 Layout 面板，确认子网格是否显示 “Subgrid” 标识，没出现说明未生效
复杂点不在怎么写，而在区域命名是否贴业务、媒体查询是否覆盖全断点、嵌套 Grid 是否真隔离了内外布局逻辑——这些地方一松动，改一个卡片就牵出三处错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
