Grid 无法实现动态标签云的自动换行与紧凑排列，因其行列轨道需可预测尺寸，而标签云文字长度、字号、行高动态变化导致重排抖动、留白失控；flex-wrap: wrap 才是唯一稳定方案。
不能用 Grid 实现动态标签的自动换行与紧凑排列——这不是写法问题，而是模型冲突。 标签云（tag cloud）高度依赖文字长度、字号缩放、内边距和行高动态变化，而 Grid 要求行列轨道有可预测的尺寸约束；强行用 Grid 会导致重排抖动、行高不齐、留白失控或文字溢出。
为什么 grid-auto-flow: row dense 在标签云里完全失效
很多人试过加 grid-auto-flow: row dense 想“填空式换行”，但实际毫无作用：
- 只要某个标签写了
grid-column或grid-row（哪怕只是调试时加的），它就退出自动流，dense对它彻底无效 -
font-size: clamp()触发 runtime 高度突变，Grid 的布局引擎无法在每一帧重新计算 dense 填充位置 -
white-space: normal或未设line-height→ 标签行数不一致 → baseline 锚点消失 → dense 失去对齐参照 - 浏览器 DevTools 里打开 “Show grid line numbers” 会发现：dense 只在纯顺序项中画出紧凑轨道，一旦有高度差异，空隙就卡死不动
flex-wrap: wrap 是唯一稳定方案
Flexbox 的流式模型天然适配无结构内容流。正确写法不是“凑合用 Grid”，而是直接换方案：
- 容器设
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，就得接受它对结构的硬性要求：
立即学习“前端免费学习笔记（深入）”；
- 所有标签必须有统一高度，比如
height: 2.5rem或min-height: 2.5rem - 字号只能固定（如
font-size: 0.875rem）或通过媒体查询阶梯切换，禁用clamp() - 每个标签内部用
display: flex+align-items: center+height: 100%垂直居中 -
grid-auto-flow: row必须显式写出，且搭配grid-auto-rows: minmax(2.5rem, auto)，否则 Safari 可能塌陷行高 - 别指望“自动紧凑”——Grid 没有 dense 的兜底能力，空隙就是空隙，它不会帮你拉齐或压缩
真正容易被忽略的，是标签云的本质：它是「无结构、无高度承诺的内容流」。Grid 的行列模型不排斥换行，但它排斥不可预测的高度。你调得再细，只要有一个标签因字数多了一行，整行布局就可能错位——这不是 bug，是设计契约的断裂。
