css grid 布局卡片最稳，用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 避免塌陷；数字用 font-variant-numeric: tabular-nums 对齐；动态更新时优先用 transform: scale() 防 layout shift；响应式慎用固定列数，应配合 auto-fit/fill 或媒体查询。
用 CSS Grid 布局卡片区域，避免 float 或 inline-block 的塌陷问题
直接用 display: grid 控制卡片排列最稳，尤其当卡片高度不一致时——float 容易导致后续内容上浮，inline-block 又对空白符敏感，调试起来反而更费时间。
推荐写法：
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
-
minmax(280px, 1fr)确保单卡最小宽度，同时在宽屏下自动均分剩余空间 -
gap替代 margin，避免子元素 margin 合并或外溢 - 别设
width: 100%在卡片内部，这会让 flex/grid 计算错尺寸
卡片内数字统计用 font-variant-numeric: tabular-nums 对齐
多个卡片并排时，如果数字位数不同（比如 “12” 和 “1,247”），默认字体等宽性差，会导致数值列“抖动”。用 tabular-nums 强制等宽数字字形，对齐效果立竿见影。
实操建议：
- 在数字容器（如
<span class="stat-value"></span>）上加该样式 - 配合
font-family指定支持该特性的字体，例如"SF Pro Display", "Segoe UI", sans-serif - 注意 Safari 旧版本需加
-webkit-font-variant-numeric前缀
动态更新数字时避免 layout shift，用 transform: scale() 替代 height 变化
如果卡片数字是通过 JS 更新（比如轮询接口），直接改 innerText 可能触发重排，尤其当数字位数突变（如从 “99” 到 “100”）且容器无固定高度时，整个卡片会跳动。
- 给数字外层加
height: 1.5em+overflow: hidden是最简单解法 - 更平滑的做法：用
transform: scale(1.05)配合transition: transform 0.2s ease做微动提示，不改变布局流 - 避免在数字上设
line-height为非整数值（如1.33），不同浏览器渲染基线可能不一致
响应式断点下慎用 grid-template-columns: repeat(4, 1fr)
硬写死 4 列在小屏上必然挤崩。CSS 中的 repeat(4, 1fr) 不会自动降列，它只是强行把容器切成 4 等份，哪怕每份只剩 50px 宽。
- 优先用
repeat(auto-fit, ...)或repeat(auto-fill, ...)，它们会根据可用空间主动删减列数 - 真要控制最大列数，用
@media包裹不同grid-template-columns更可靠 - 移动端测试时，记得关掉 Chrome DevTools 的“device toolbar”模拟，它有时会错误报告 viewport 宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
