grid-auto-flow 控制未显式定位元素的自动填充方向（row/column/dense），不改变DOM顺序或已定位元素位置；:has()用于基于子元素存在性切换样式，非计数；order仅在纯自动布局中生效，与显式定位冲突。
grid-auto-flow 决定自动填充方向，不是“顺序”而是“填空策略”
很多人误以为 grid-auto-flow 能改变子元素的“逻辑顺序”，其实它只控制未显式定位的元素往哪填——是优先填满行（row），还是优先填满列（column），或者用 dense 模式回头塞空隙。它不改变 DOM 顺序，也不影响已设 grid-row/grid-column 的元素。
常见错误是给所有元素都写了 grid-column: 1，再指望 grid-auto-flow: column 让它们纵向堆叠——结果发现全挤在同一列同一行，因为显式列定位覆盖了自动流向。
-
grid-auto-flow: row（默认）：5 个元素在repeat(3, 1fr)下 → 前 3 个占第一行，后 2 个占第二行 -
grid-auto-flow: column：需配合grid-template-rows显式定义行数，否则可能只生成 1 行；元素按列从上到下填，填满一列再进下一列 -
grid-auto-flow: row dense可让第 4 个元素（比如被grid-column: 1 / 3占两列的 item）后面的空位被后续小元素填补，但会打乱视觉流，影响可访问性
:has() 判断子元素数量必须满足三个硬条件
想根据子项个数切换列数，:has() 是目前最接近“条件 CSS”的方案，但它不是计数函数，而是存在性检测——:has(> div:nth-child(4)) 表示“至少有 4 个子元素”，不是“正好 4 个”。
规则写错就完全失效，典型坑点：
立即学习“前端免费学习笔记（深入）”；
- 把
:has()写在子选择器上（如div:has(+ div)）→ 浏览器直接忽略整条规则 - 嵌套在
@media或@supports里 → Safari 16.4 之前不支持，部分旧版 Chrome 也会跳过 - HTML 中混入文本节点或注释 →
:nth-child(4)只数元素节点，实际第 4 个<div>可能是 DOM 第 6 个子节点，判断失败
正确阶梯写法（1–3 个 → 1 列，4–6 个 → 2 列，7+ 个 → 3 列）：
.grid:has(> div:nth-child(7)) { grid-template-columns: repeat(3, 1fr); }
.grid:has(> div:nth-child(4)):not(:has(> div:nth-child(7))) { grid-template-columns: repeat(2, 1fr); }
.grid:not(:has(> div:nth-child(4))) { grid-template-columns: 1fr; }order 和 grid-column 不能共存，选一条路到底
order 只在纯自动放置场景下起作用：所有子元素都没写 grid-row、grid-column、grid-area，且容器没禁用 grid-auto-flow。一旦你给任意一个元素加了 grid-column: 2，它的位置就被钉死，order 值再小也没用。
想实现“置顶”效果，别这么写：
.item { grid-column: 1; order: 2; }
.item.highlight { grid-column: 1; order: -1; }结果 highlight 还在原位——因为列相同，默认按 DOM 顺序堆叠。真正有效的做法只有三种：
- 改 DOM 顺序：
container.insertBefore(highlightEl, container.firstElementChild) - 换列定位：
highlightEl.style.gridColumn = "1";→"1 / 2"不行，得明确移到前几列，比如"1"改成"1 / 1"无效，合法值只能是线号，如"1"或"0"（越界报错） - 用
grid-area配合grid-template-areas预留广告位，其余元素靠order自动排布
动态插入特定元素时，显式定位比 order 更可靠
电商列表末尾有个 .ad-banner，想让它固定出现在第二行第三列？别依赖 order，直接用 grid-row 和 grid-column：
.ad-banner {
grid-row: 2;
grid-column: 3 / 5; /* 占第 3、4 列 */
}这样无论列表渲染多少项、DOM 里它在哪儿，它都精准落位。注意两点：
- 如果网格列数不固定（比如响应式
repeat(auto-fit, minmax(200px, 1fr)))），grid-column: 3可能越界 → 改用grid-column: -2（倒数第二列）或配合grid-area+ 命名区域 - 多个显式定位元素之间若行列重叠，浏览器按 DOM 顺序层叠，
z-index才控制视觉前后，order对它们完全无效
真正复杂的点在于：当既要响应式列数、又要固定某元素位置、还要支持无障碍导航时，order 和显式定位都只是局部解，最终往往得靠 JS 动态调整 style.gridArea 或重排 DOM，而不是纯 CSS 折中。
