真正可控的仪表盘卡片重排是用 grid-template-areas 显式声明语义化区域布局，通过媒体查询和预置 class 切换适配多尺寸、多状态，避免 JS 直接操作样式引发重排与可访问性问题。
用 grid-template-areas 做语义化卡片重排
纯靠 order 或 flex 移动卡片，在多尺寸、多状态（如编辑/查看）、多数据源的仪表盘里极易失控。真正可控的方式是把布局语义化——用 grid-template-areas 显式声明每个卡片在不同断点下的位置区域。
比如你有 traffic-card、user-chart、alert-list 三块，PC 端要左图右表，移动端要垂直堆叠，就该这样写：
/* 默认移动优先 */
.dashboard {
display: grid;
grid-template-areas:
"traffic-card"
"user-chart"
"alert-list";
}
<p>@media (min-width: 768px) {
.dashboard {
grid-template-areas:
"traffic-card user-chart"
"traffic-card alert-list";
}
}</p>
关键不是“怎么排”，而是“谁占哪块地”。改布局只动字符串，不碰 HTML 结构或 JS 逻辑。
-
grid-area必须和grid-template-areas中的名称严格一致，大小写、连字符都不能错 - 同一区域名可重复出现（比如让
traffic-card横跨两行），但不能留空格或换行符 - IE 不支持该语法，若需兼容，得 fallback 到
display: flex+ JS 动态 class 切换
动态更新 grid-template-areas 要绕开 CSSOM 重排陷阱
仪表盘常需响应用户拖拽、配置开关或权限变化实时重排卡片。直接用 JS 改 style.gridTemplateAreas 看似简单，但每次赋值都会触发强制同步布局计算，卡顿明显，尤其卡片多、DOM 深时。
更稳的做法是预置多套 class，用 className 切换代替内联样式操作：
.dashboard.layout-a { grid-template-areas: "a b" "c c"; }
.dashboard.layout-b { grid-template-areas: "a c" "b c"; }
然后 JS 只做 el.classList.replace("layout-a", "layout-b")。浏览器能批量合并样式变更，避免 layout thrashing。
- 别在循环里反复 set
style.gridTemplateAreas，哪怕只是临时调试 - 如果必须 JS 生成区域字符串（比如从后端配置读取），先拼好整个字符串再一次性赋值，不要分段 concat 后再 set
- 用
getComputedStyle(el).gridTemplateAreas调试时注意：返回值带引号，且空格规范，不能直接拿来比对
grid-auto-flow: dense 不是你想要的“自动填坑”方案
看到卡片挪走后留下空白，第一反应常是加 grid-auto-flow: dense 让后续项自动填空。这在静态列表里可行，但在仪表盘中会破坏视觉流和可访问性顺序。
比如你把高优的 alert-list 卡片临时隐藏，dense 可能让低优先级的 log-summary 插进它原来的位置，导致屏幕阅读器顺序错乱，运维人员扫一眼漏掉告警。
- 仪表盘的“顺序”本质是信息优先级，不是 DOM 顺序，别依赖
dense捣浆糊 - 真要隐藏卡片，用
visibility: hidden保留占位，或配合grid-area设为none（CSS Grid Level 2） -
grid-auto-flow: row（默认）更安全，空白就空白，至少结构可控
卡片宽高不固定时，minmax() 比 fr 更靠谱
仪表盘卡片内容长度差异大（比如日志列表 vs 折线图），用 1fr 2fr 容易撑爆容器或压扁图表。此时应优先用 minmax(min-content, 1fr) 或 minmax(300px, 1fr)。
例如横向双列布局：
.dashboard {
grid-template-columns: minmax(300px, 1fr) minmax(400px, 2fr);
}
这样既保最小可用宽度，又允许富余空间按比例分配，不会因某张卡片内容过短而让另一张无限拉伸。
-
fr单位只在有剩余空间时生效，若总min-width超过容器，fr会被忽略，整行溢出 - 用
minmax(0, 1fr)要小心：某些旧版 Chromium 对0解析异常，建议改用minmax(min-content, 1fr) - 卡片内部若用
height: 100%，父容器必须有明确高度（如height: 400px或aspect-ratio），否则 100% 无效
复杂仪表盘的重排序，核心不在“怎么动”，而在“动之前是否已定义好每块地的归属和边界”。一旦区域名、最小尺寸、隐藏策略都固化在 CSS 里，JS 就只管开关 class，而不是拼字符串、算位置、防重排。这点容易被忽略——越想用 JS 控制细节，越容易掉进同步布局和可访问性的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
