grid-auto-flow: column 仅改变自动填充顺序为从上到下、左到右，不自动创建垂直栅格；需配合 grid-template-columns（如 repeat(auto-fit, minmax(240px, 1fr)))）和 grid-auto-rows（如 120px）才能实现可控列数与统一行高。
grid-auto-flow: column 会让 grid-items 按列顺序填充，但不等于“垂直栅格”
很多人以为把 grid-auto-flow 设为 column 就自动获得类似 Bootstrap 垂直堆叠的栅格效果，其实不是。它只改变自动放置（auto-placement）顺序：从左到右、上到下 → 改为从上到下、左到右。真正决定“有多少列”“每列多宽”的，是 grid-template-columns；而“行高是否固定”“是否允许跨行”等行为，仍由其他属性控制。
常见错误现象：grid-auto-flow: column 后内容溢出容器、高度失控、item 被强行拉伸、响应式断点失效。
- 必须显式设置
grid-template-columns（哪怕用repeat(auto-fit, minmax(200px, 1fr)))），否则默认为none，所有 item 挤在第一列 - 若未设
grid-auto-rows，浏览器会按内容撑开每行高度，导致列高不一致 —— 这在垂直流中极易引发视觉断裂 -
grid-auto-flow: column不影响grid-column/grid-row的手动定位逻辑，手动指定的起始/结束线仍以原始网格线为准
垂直栅格真正需要的是“列数可控 + 行高统一 + 自动换列”
想实现类似“每列最多放 3 个卡片，超出就新开一列”，不能只靠 grid-auto-flow: column。它只会把第 4 个 item 往下塞进同一列，而不是另起一列 —— 因为列数由 grid-template-columns 决定，不是由 item 数量触发的。
正确做法是结合 grid-template-columns 的响应式重复 + grid-auto-rows 固定行高：
container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
grid-auto-rows: 120px; /* 所有行统一高度 */
grid-auto-flow: column; /* 按列填满 */
}
-
auto-fit+minmax()让列数随容器宽度自动增减，比写死repeat(3, 1fr)更实用 -
grid-auto-rows必须设具体值（如120px或min-content），否则每列各行高度不同，视觉上就不是“栅格” - 若 item 内容高度可能超过
grid-auto-rows，加overflow: hidden或用minmax(min-content, 120px)替代纯数值
IE 不支持 grid-auto-flow: column，别指望兼容旧版
IE 完全不识别 grid-auto-flow，包括 row 和 column 值。哪怕你写了 display: -ms-grid，IE 的旧 Grid 实现也不支持自动流方向切换。
这意味着：如果项目需支持 IE11，就不能依赖 grid-auto-flow: column 构建核心布局。替代方案只有：
- 用
flex-direction: column+flex-wrap: wrap配合固定容器高度（但换列逻辑不直观，且需 JS 测量高度才能精确控制列数） - 服务端或构建时生成多组
<div class="col">，用 CSS 多列（<code>column-count）模拟 —— 但无法对单个 item 精确控制位置 - 直接放弃“垂直自动栅格”，改用 JavaScript 布局库（如 Masonry）补足
- 屏幕阅读器仍按 DOM 顺序读取，而
grid-auto-flow: column可能让视觉顺序（第1列第1个 → 第2列第1个）与 DOM 顺序（第1列第1个 → 第1列第2个）不一致，造成认知偏差 - 长文本在固定高度的
grid-auto-rows中会被裁剪，text-overflow: ellipsis在多行场景下无效，得用display: -webkit-box或 JS 截断 - 触屏设备上，垂直栅格的 item 密集排列易引发误触，建议留足
gap（至少12px）并确保点击区域 ≥ 44×44px
垂直栅格的实际瓶颈不在 flow，而在内容截断和可访问性
当 item 按列堆叠后，用户滚动方向变成纵向，但每个 item 的阅读流仍是自上而下。这时容易忽略两个问题：
真正难的不是让 grid 往下填，而是填完之后，内容还看得清、读得懂、点得准。
