CSS Grid自动放置顺序取决于三要素：明确位置的元素优先落位，未定位元素按grid-auto-flow流向（row/column）在剩余空白轨道中填充，dense模式可回填缝隙但不改变DOM顺序。
理解 CSS Grid 的自动放置顺序，关键不在死记步骤，而在于看清三件事：谁先被放、往哪放、遇到空位怎么处理。只要理清这三点，算法就不再抽象。
明确位置的元素永远优先
带有 grid-column、grid-row 或 grid-area 的元素，会第一时间按指定坐标落位，不参与后续自动流计算。其他元素不会挤占它的格子，也不会覆盖它——哪怕 DOM 顺序在它前面。
- 比如
.item { grid-column: 2 / 4; }占据第2到第4列，那么自动放置时会直接跳过这两列之间的区域 - 多个手动定位项之间若重叠，后声明的样式会覆盖前者（层叠规则起作用）
- 未设位置的元素绝不会“拆掉”已定位项来填空，它们只在剩余空白轨道里找地方
流向决定填充方向，不是简单从左到右
grid-auto-flow 是控制自动项走向的开关，默认是 row，但它的实际行为是：“填满当前行（或列）的可用格子，再进下一行（或列）”，而不是“逐个格子线性扫过去”。
-
row：一行一行填，每行尽可能从左开始，填满显式定义的列数；超出后自动生成新行 -
column：一列一列填，每列从上开始，填满显式定义的行数；超出后自动生成新列 - 注意：
grid-template-columns: repeat(3, 1fr)定义了3列，但若有5个自动项，在row模式下就是前3个占第一行，后2个占第二行——不是“第4个塞进第1列第2行”，而是整行推进
dense 模式只填空，不改顺序逻辑
row dense 或 column dense 不是让元素“乱序排列”，而是允许后续小尺寸项回头去填前面因跨行/跨列留下的缝隙。
立即学习“前端免费学习笔记（深入）”；
- 例如：第一个项设
grid-column: span 2占两列，导致第1行第3列空着；第二个项是普通单格，在row下会等第2行才放；但在row dense下，它可能直接放进第1行第3列 - dense 不改变 DOM 顺序，也不改变项本身的尺寸或跨度，只是优化空间利用率
- 慎用 dense：它可能让视觉流断裂（比如标题在内容下方出现），影响可访问性和语义阅读顺序
隐式轨道是自动放置的“后备仓库”
当自动项数量超过显式网格（grid-template-rows/columns）容量时，浏览器会悄悄生成额外的行或列——这就是隐式轨道，由 grid-auto-rows 和 grid-auto-columns 控制大小。
- 没设
grid-auto-rows？默认每行高为auto，高度由内容撑开 - 设了
grid-auto-rows: 120px？所有隐式生成的行都固定为120px，不管里面内容多高 - 配合
minmax(100px, 1fr)可实现弹性隐式行，既保底又可伸缩
