grid-auto-flow仅控制未显式定位的子元素填充顺序，不影响已定位项或template-areas；row按行扫描，column按列扫描；需配合grid-template-columns和grid-auto-rows才能实现预期栅格布局。
grid-auto-flow 不是“翻转整个网格”的开关
它只管那些没写 grid-row 或 grid-column 的新子元素往哪塞，对已显式定位的项、grid-template-areas 定义的区域完全没影响。很多人设了 grid-auto-flow: column 后发现第一行还是横着铺开——因为那几个 item 其实被 DOM 顺序或别的规则“钉死”在第一行了，grid-auto-flow 根本没机会插手。
row 和 column 模式实际填空顺序怎么走
关键看「扫描路径」：浏览器按这个路径找第一个空单元格，把新项放进去。
-
grid-auto-flow: row（默认）：从左到右扫完一行 → 再从左到右扫下一行 → 循环 -
grid-auto-flow: column：从上到下扫完一列 → 再从上到下扫下一列 → 循环
注意：这和坐标系无关。即使设了 column，grid-row: 2 仍指第二根水平线之后的行，不会变成“第二列”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
为什么加了 column 却只有一列还溢出容器
因为 grid-auto-flow: column 只决定“往哪填”，不决定“能填几列”。列数由 grid-template-columns 控制；没设它，就默认只有 1 列（none），所有项全挤进去，自然纵向堆高、撑破容器。
- 必须配
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))才能自动算出列数 - 必须配
grid-auto-rows: 120px（不能留auto）才能让每行高度一致，否则视觉上根本不像栅格 - 如果子元素内容高度不一，
grid-auto-rows: minmax(min-content, 120px)比纯数值更安全
dense 模式到底能不能开
能开，但等于主动放弃 DOM 顺序与视觉顺序的一致性。它会让后面的 item 往前跳，去填前面手动定位后留下的空洞——键盘 tab、屏幕阅读器、:nth-child(2) 都会错乱。
- 仅适合纯展示卡片墙，且确认无交互、无语义要求
- 只要用了
grid-row-start或跨行span，dense 就可能把第 5 个 item 插进第 1 行第 2 列这种反直觉位置 - RTL 布局下
row dense仍按 LTR 逻辑扫描，容易偏移一格 - IE 完全不认
grid-auto-flow任何值，包括row，别指望兼容
真正难控的不是 dense 开关本身，而是它和显式定位、响应式列数、隐式轨道尺寸三者叠加后的不可预测性——调试时得先删光所有 grid-row/grid-column，再逐条加回去看哪一步触发了意外回填。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
