grid-auto-flow: column 仅改变自动填充顺序为从上到下、左到右，不自动创建垂直栅格；需配合 grid-template-columns（如 repeat(auto-fit, minmax(240px, 1fr)))）和 grid-auto-rows（如 120px）才能实现可控列数与统一行高。
为什么 grid-auto-flow: column 不会按你预期“从上到下”填满一列再换列
直接设 grid-auto-flow: column 后，元素确实按列顺序进入网格，但默认没有设定行数限制，浏览器会无限生成新行——结果看起来还是“从左到右、换行堆叠”，根本不像垂直流。真正起作用的是配合 grid-template-rows（显式定义行高或行数）或 max-height + overflow 触发隐式列扩展。
- 只写
grid-auto-flow: column，不设grid-template-rows或容器高度约束，等同于没设——Grid 仍按常规文档流方向渲染 - 若容器无固定高度，Grid 会优先扩展行数而非列数，哪怕 flow 是 column
- 必须让 Grid 容器“知道它最多能占几行”，才能迫使后续项溢出到下一列
实现多选标签组的最小可行 Grid 布局
目标：标签水平紧凑、自动换列（比如最多显示 3 行，超出就新增一列），支持动态增删，不依赖 JS 计算列数。
.tag-group {
display: grid;
grid-auto-flow: column;
grid-auto-rows: max-content; /* 每行高度自适应标签 */
grid-row-gap: 4px;
grid-column-gap: 8px;
max-height: 96px; /* 3 行 × 标签高度（约 32px） */
overflow-y: hidden; /* 防止滚动，让第4行自动进下一列 */
}-
max-height是关键：它让 Grid 容器产生“行容量上限”，触发grid-auto-flow: column的列分裂逻辑 -
grid-auto-rows: max-content确保每行高度贴合标签内容，避免空白拉伸 - 标签本身用
display: inline-flex或inline-block，避免换行符空格干扰宽度
和 flex-wrap: wrap 相比，Column Flow 的实际优势在哪
Flex 的 flex-direction: column + flex-wrap: wrap 看似更直觉，但它在多数浏览器中不支持“按列换行”（仅 Firefox 支持 flex-wrap: wrap-reverse 变通），而 Grid 的 grid-auto-flow: column 是标准且跨浏览器稳定的方案。
- Flex 的 column wrap 在 Chrome/Safari 中会被忽略，降级为单列溢出，必须用 JS 或媒体查询模拟列数
- Grid 方案无需预设列数，元素数量变化时自动重排，适合多选组件中标签动态增删场景
- 性能上，Grid 的隐式列生成比 Flex + JS 计算列宽 + 强制 reflow 更轻量
容易被忽略的交互细节：如何让键盘焦点和视觉顺序一致
当 Grid 按列排列后，Tab 键默认仍按 DOM 顺序（即原始行序）聚焦，但视觉上用户看到的是“先第一列全部、再第二列”，造成焦点跳转错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须加
tabindex="-1"到每个标签，再用 JS 手动管理焦点顺序，按列优先遍历gridRowStart和gridColumnStart计算位置 - 或者放弃原生 Tab 流，改用
role="group"+aria-activedescendant实现可控焦点环 - 纯 CSS 无解——Grid 的渲染顺序 ≠ 语义顺序，无障碍必须额外处理
CSS Grid 的 grid-auto-flow: column 确实能省掉列数计算，但它的行为高度依赖容器约束；没设 max-height 或 grid-template-rows，它就只是个摆设。真正上线前，得测三件事：动态增删是否重排正常、键盘导航是否跟得上视觉列、小屏幕下 max-height 是否导致截断。
