标签云不能用 grid，因高度动态导致重排抖动、留白和溢出；应改用 flex + flex-wrap 方案，设 flex-shrink: 0、white-space: nowrap 和 clamp() 字号，确保稳定可访问。
grid-auto-flow: dense 在标签云里完全不可靠，别用。
标签云不能用 Grid 的根本原因
Grid 要求列高一致或有明确约束，而标签云的每个项高度由文字长度、字号缩放、内边距动态决定。一旦你设了 grid-auto-rows: auto 或 minmax(1em, max-content)，浏览器会反复重排——位置抖动、行间留白、文字溢出全来。这不是 bug，是 Grid 模型和标签云本质冲突导致的必然结果。
-
grid-auto-flow: row dense对写了grid-column: 2的标签直接失效 -
font-size: clamp()触发 runtime 高度突变，dense完全跟不上 -
white-space: normal或没设line-height→ 每个标签行数不一，baseline 锚点消失
正确方案：用 flex + flex-wrap
这是目前唯一稳定、可访问、调试直观的纯 CSS 方案。
- 父容器设
display: flex+flex-wrap: wrap+gap: 0.5rem（IE 不支持gap，得用margin模拟） - 每个标签加
flex-shrink: 0防止被压缩，white-space: nowrap保单行 - 字号直接作用于标签：
font-size: clamp(0.75rem, 2.5vw, 1.25rem)，不碰布局逻辑 - 想减少视觉松散？加
align-content: flex-start拉齐顶部，别依赖 baseline 对齐
非要用 Grid？那就接受统一高度约束
真要上 Grid，必须放弃自适应高度这个前提，否则就是给自己埋坑。
- 每个标签内部用
display: flex+align-items: center+height: 100%垂直居中 - 字号只能固定，或通过媒体查询阶梯切换（如
@media (min-width: 768px)），禁用 runtime 缩放 -
grid-auto-flow: row dense只对未显式定位的标签生效；写了grid-column或grid-row的，就退出自动流
标签云的本质是「无结构、无高度承诺的内容流」，Grid 的行列模型天然排斥它。真正需要换行行为的场景（比如图集、表单、卡片列表），才适合用 repeat(auto-fit, minmax())；而标签云不是其中之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
