仪表盘外层必须用 display: grid，内层组件用 display: flex——因Grid负责二维布局刚性分层，Flexbox仅支持单向流式排列，无法同时约束卡片的行列尺寸与稳定重排。
仪表盘外层必须用 display: grid，内层组件用 display: flex ——这不是权衡，而是职责刚性分层。
为什么不能只用 Flexbox 做整页骨架
Flexbox 一次只能管一个方向。比如 flex-direction: column 下，你无法让某个卡片同时约束高度（占半行）和宽度（横跨两列）；flex-wrap: wrap 在卡片尺寸不均或数据实时刷新时，容易触发不可预测的重排抖动，尤其在监控看板里，视觉跳变直接干扰判断。
常见错误现象：justify-content 在没设 grid-template-columns 的 Grid 容器里失效，但反过来，Flex 容器里压根没有 grid-row 或 grid-column 属性——浏览器静默忽略，不报错也不生效。
grid-template-areas 和命名网格线怎么选
grid-template-areas 适合整页语义化骨架，比如 "header header sidebar" "main main sidebar" "footer footer footer"；命名网格线适合子模块像素级定位，比如图表容器必须对齐某条垂直分割线、时间轴横跨特定轨道。
二者混用会冲突：grid-area 声明会覆盖命名线定位，且父容器若没写 grid-template-areas 字符串，子元素设了 grid-area: "sidebar" 也会退化成默认位置，无视命名线。
声明命名线时注意：
- 名字全小写，不能含空格或下划线（
sidebar-start✅，sidebar start❌，sidebar_start❌） - 同一轨道可多个名字（如
[main-start] [content-start]），方便不同模块引用不同语义名 - 子元素用
grid-column: main-start / main-end，不加引号 - 漏写
display: grid或拼错名字，grid-column声明完全无效
响应式断点别重写整套 template-areas
用户在桌面查趋势、平板核数据、手机只看告警——不是等比例缩放，而是信息优先级重组织。
实操建议：
- 小屏优先隐藏非核心模块，用
grid-area: none或display: none（别用visibility: hidden，它仍占布局空间） - 窄屏下时间轴改用垂直堆叠 + 左侧固定时间戳，避免压缩宽度导致文字折行混乱
- 用
@container（配合container-type: inline-size）替代纯视口媒体查询，让卡片根据父容器宽度自主调整列数 - 只在
@media中覆盖变化部分，比如把"sidebar main"改成"main"，而不是重复定义全部三行
防止图表容器塌陷的关键细节
很多仪表盘用 canvas 或 SVG 渲染图表，习惯写 width: 100%; aspect-ratio: 2/1。但若父容器本身没设 min-height，且内容为空或加载中，Grid 会按 0 高度收缩，图表直接看不见。
必须搭配：
- 父容器设
min-height（如min-height: 300px） - 用
minmax(0, 1fr)替代纯1fr，防长文本或大图表撑爆容器 - 别用
grid-column: 1 / -1强制全宽——嵌套 Grid 里会失效，改用命名线或grid-area -
gap是唯一干净解法，别靠子元素margin排列，尤其响应式时极易错位
最常被忽略的是：命名线名字拼错、grid-area 和命名线混用、以及图表容器缺 min-height ——这三处一出问题，布局就静默崩坏，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
