grid-auto-flow: normal按顺序排列不回填空位，保持视觉流但可能浪费空间；dense则优先紧凑排列，允许小项目回填前面空缺以节省空间，但可能打乱阅读顺序。
在 css Grid 布局中，grid-auto-flow 属性用于控制自动放置的网格项如何被分配到网格容器中的空单元格。它有两个主要关键字值：normal 和 dense。它们的区别在于处理空缺位置时的行为方式。
grid-auto-flow: normal
这是默认行为。当设置为 normal 时，浏览器会按照行或列的顺序依次填充网格项，即使前面有空的单元格也不会“回填”。
说明：
- 网格项只向前推进，不会回头去填补之前留下的空白。
- 如果某个项目因为跨度（span）较大而跳过了某些格子，这些格子将保持为空，后续的小项目也不会去填充它们。
- 布局更可预测，但可能导致空间浪费。
grid-auto-flow: dense
使用 dense 模式时，浏览器会尝试尽可能紧凑地排列网格项，允许后面的较小项目“回填”前面留下的空白区域。
立即学习“前端免费学习笔记（深入）”；
说明：
- 系统会查找可以容纳当前项目的最小空位，并将其放入其中，以减少空白区域。
- 虽然能提升空间利用率，但可能打乱视觉顺序，影响可读性或逻辑结构。
- 适合内容顺序不敏感的展示场景，比如图库、卡片列表等。
实际例子对比
假设有一个 3 列网格，项目 1 占 2 列，项目 2 占 1 列：
- 用 normal：项目 2 会排在第 3 格，第 4 格开始下一行，即使第 1 行第 3 格之后有空间，也不回填。
- 用 dense：如果有更小的项目出现在后面，它们可能会被提前放到前面未使用的格子里，哪怕这改变了原本的视觉流。
基本上就这些。dense 更省空间但可能影响阅读顺序，normal 更符合自然流程但可能留下空洞。根据你的布局需求选择合适模式。