grid-auto-flow: dense 无法可靠实现自适应标签云布局，因其仅在既有网格轨道中填空，不创建新行或调整轨道高度，面对高度动态的标签易致溢出、留白与重排抖动；纯css推荐flex+flex-wrap方案。
grid-auto-flow: dense 不能可靠实现自适应标签云布局。它对高度动态变化的标签（如文字长度不一、字体大小响应式、行数不确定）几乎无效，视觉错位和空白残留是常态。
为什么 dense 在标签云里基本失效
标签云的核心问题是每个 <span></span> 高度由内容决定且不可预测：font-size 响应式缩放、white-space: nowrap 或换行策略不同、内边距随字号变化 —— 这些都会让 grid-auto-rows 失去锚点。而 grid-auto-flow: dense 只在「已有轨道」中找空格子填，它不会创建新行、也不会压缩/拉伸轨道。一旦某标签撑高了某行，dense 就只能在剩余固定高度的格子里硬塞，结果不是溢出就是留白。
- 常见错误现象：
grid-auto-rows: auto下 dense 完全无感；grid-auto-rows: minmax(1em, max-content)会导致浏览器反复重排，标签位置抖动 - 使用场景限制：仅当所有标签用等高容器包裹（如统一
line-height+height）、且禁用换行时，dense 才可能“看起来”有点用 - 性能影响：配合
minmax()和大量标签，触发 Layout Thrashing，滚动卡顿明显
真正可用的纯 CSS 标签云方案：flex + flex-wrap
放弃 Grid 密集填充幻想，改用 display: flex 配合 flex-wrap: wrap 是目前最稳定、可访问、易调试的选择。
- 父容器设
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 做标签云，就得接受「牺牲自适应性换可控性」——所有标签必须运行在统一高度约束下。
- 强制每行高度一致：
grid-auto-rows: 2.5rem（不能用auto或minmax()） - 标签内文字垂直居中：
display: flex+align-items: center+height: 100% - 字号必须固定或通过媒体查询阶梯切换（如
@media (min-width: 768px) { .tag { font-size: 1rem; } }），避免 runtime 高度突变 - 启用
grid-auto-flow: row dense后，只对未显式定位的标签生效；一旦某个标签写了grid-column: 2，它就脱离 dense 管控范围
最常被忽略的一点：标签云本质是语义化文本流，不是网格模块。用 dense 强行“填空”，等于把阅读顺序交给浏览器调度器，屏幕阅读器会按 DOM 顺序读，但视觉上跳来跳去 —— 用户既看不到完整上下文，也猜不到下一个标签在哪列。这不是布局问题，是信息架构风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
