grid-auto-flow: column 需配合 grid-template-columns 才能实现竖排，否则默认单列无限宽而显横排；dense 会破坏 DOM 顺序与视觉一致性，IE 完全不支持该属性。
grid-auto-flow: column 为什么没让元素竖着排
加了 grid-auto-flow: column 却还是横着铺开，根本不是属性失效，而是你没给浏览器“列”的结构依据。它只管「往哪填」，不负责「能填几列」。
常见错误现象：display: grid + grid-auto-flow: column，但没设 grid-template-columns → 浏览器默认列数为 none，所有项全挤进第 1 列，而这一列无限宽，视觉上就是横排溢出。
- 必须配
grid-template-columns（如repeat(3, 1fr)或响应式写法repeat(auto-fit, minmax(240px, 1fr)))）才能定义列数 - 如果同时写了
grid-template-rows: 100px 100px，column 模式会把第 3 个项直接塞进第 1 行第 2 列——因为前两行已“锁死”，没空间生成新行 -
grid-auto-rows必须显式设置（如grid-auto-rows: 120px），否则隐式行高为auto，高度随内容起伏，根本不像栅格
row dense 和 column dense 到底能不能用
能用，但等于主动交出 DOM 顺序与视觉顺序的一致性。dense 不是“更聪明的换行”，是允许后续项往前跳着插空，后果很具体。
典型问题场景：屏幕阅读器仍按 HTML 源码顺序读取，但用户看到的是第 5 个元素出现在第 1 行第 2 列；:nth-child(2) 选中的可能是视觉上第 4 个卡片；键盘 tab 顺序也完全错位。
立即学习“前端免费学习笔记（深入）”；
- 只要存在
grid-row: span 2或grid-column-start: 3这类显式跨格/定位，dense 就可能把后面项插进你完全没预料的位置 - RTL 布局下，
row dense仍按 LTR 扫描逻辑填空，容易导致列偏移一格 -
grid-template-areas已定义的区域不受 dense 影响，它只作用于落入隐式网格的未命名项
怎么实现“每列最多 N 个，超了就新开一列”
光靠 grid-auto-flow: column 实现不了这个需求。Grid 没有“列容量”概念，它只按轨道扫描填空，不会因项数触发新列创建。
真正可控的做法是用容器高度封顶 + 隐式行控制：
- 设
max-height: 480px（比如 4 行 × 120px）+grid-auto-rows: max-content - 配合
grid-auto-flow: column，Grid 会在当前列撑满max-height后，自动把后续项推进下一列 - 别用
grid-auto-rows: 1fr，它会让每行强行撑满剩余空间，破坏固定行数预期 - 如果卡片带 padding/margin，记得在
minmax()的最小值里预留空间，否则auto-fit可能退化为单列
IE 和旧浏览器兼容性必须绕开
grid-auto-flow 在 IE 中完全无效，包括 row（默认值）和 column 都会被忽略，一律退化为单列流式布局；dense 在所有旧版浏览器中均不支持。
如果你的项目还需兼容 IE，这个属性就得彻底绕开——要么改用 Flexbox 的 flex-direction: column + flex-wrap 模拟，要么用 JS 动态分组后渲染多列容器。
最容易被忽略的一点：只要混用了 grid-template-areas 和显式定位（如 grid-row: 2），再叠加 dense 和响应式列数，调试时根本没法预测回填路径——得先删光所有显式定位规则，再一条条加回去看哪一步触发了意外插空。
