grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) 是最简响应式多选标签解法，因 auto-fit 按需创建列并均分剩余空间，避免空轨道虚高；DOM 必须每个标签为独立 grid item（如直接子级 ），不可包裹于统一容器内再设 grid，否则浏览器可能忽略网格参与行为。
直接用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) 就能撑起响应式多选标签组，无需媒体查询，也避免小屏标签被压扁或换行错位；关键在 DOM 结构必须每个标签独立为一个 <button></button> 或 <span></span>，不能套在统一容器里再用 Flex 去 wrap。
为什么 auto-fit + minmax() 是最简解法
这组组合的行为是：浏览器先按最小宽度（如 120px）尽可能铺列，再把剩余空间均分给实际存在的列。结果就是标签数随容器宽度自然增减，每行填满、不留空隙。
-
auto-fill会预占所有可能轨道，导致空标签位撑高容器，视觉上出现“虚高”或间距异常 - 只写
repeat(3, 1fr)或1fr 1fr 1fr完全不响应尺寸变化，小屏照样三列，标签文字被截断或点击困难 -
minmax(120px, 1fr)中的120px应设为标签最小可操作宽度——带文字的<button></button>通常不能窄于112px（含内边距），否则触控区域过小
DOM 结构必须每个标签是独立 grid item
错误写法：<div class="tags">
<span>React</span><span>Vue</span><span>Svelte</span>
</div>，然后对 .tags 设 display: grid —— 这样所有 <span></span> 是子元素，但若它们没设 display: contents 或未显式声明为 grid item，部分浏览器会忽略其网格参与行为。
- 正确结构：每个标签单独作为
<button></button>或<span></span>，直接挂载在 grid 容器下，例如：<div class="tag-grid"> <button>React</button><button>Vue</button><button>Svelte</button> </div> - 若需支持删除（×图标），应在每个
<button></button>内部用display: flex布局，而不是在外层统一设列 - 避免用
label包裹input[type=checkbox]再套进 grid —— 这会导致无障碍工具读取顺序混乱，且焦点管理失效
兼容性与样式陷阱
IE11 完全不识别 auto-fit，会跳过整条 grid-template-columns 声明，退化成垂直堆叠的 block 流；@supports (grid-template-columns: repeat(auto-fit, 1fr))) 在 IE11 下无效，无法 fallback。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：加 class
fallback，并写.tag-grid.fallback button { margin-right: 8px; margin-bottom: 6px; display: inline-block; } - 不要给 grid 容器设
height或min-height，否则隐式行高计算受阻，列数卡死 - 慎用
gap配合border-radius：某些 Safari 版本中，gap会切断圆角，可用padding+margin替代
真正难的不是写出那行 repeat(auto-fit, minmax(120px, 1fr)))，而是让每个标签语义独立、交互可控，并接受 grid 的自动流规则——一旦 DOM 和 CSS 责任边界模糊，响应式就变成玄学。
