放置：基于网格线、span 与 auto-placement
轨道之间的分界线从 1 开始编号，n 条轨道有 n+1 条线；也可从末尾用 -1 倒数。grid-column: 1 / 3 把项放在第 1 到第 3 条列线之间（占 2 列）,grid-row: 2 / span 2 从第 2 条行线起跨 2 行。未显式定位的项交给 auto-placement 算法：沿 grid-auto-flow 方向逐格扫描、填进第一个放得下的位置。本页用线号实测放置，并看 dense 如何回填空洞、放到显式网格之外时隐式轨道怎样长出来。
线号是「线」不是「格」。 4 列的网格有 5 条列线(1 2 3 4 5)，也可写成 -5 -4 -3 -2 -1。grid-column: 1 / -1 =「从首线铺到末线」= 占满整行，是最常用的「通栏」写法，且不必知道总列数。
1 · 基于网格线放置一个项
绿色高亮项按下方线号定位，其余灰项由 auto-placement 自动填空。把结束线拖到第 5 线之外，会看到 grid 在右侧长出隐式列轨（橙色虚线标注），引擎据 grid-auto-columns 给它尺寸。
2 · auto-placement 与 grid-auto-flow: dense
下列项含两个宽项（各跨 2 列）。默认 row 流是逐行扫描、不回头：宽项放不下当前行剩余空间时换行，身后留下空洞。打开 dense，算法会回头把后面较小的项塞进先前的空洞——空间利用率高，但项的视觉顺序会偏离 DOM 顺序（影响 Tab 键 / 朗读顺序）。
dense 的代价：视觉顺序 ≠ 阅读顺序。 回填会让后面的小项跑到前面，导致键盘 Tab 焦点顺序与屏幕阅读器朗读顺序（仍按 DOM）和肉眼所见错位。内容顺序有语义时慎用；纯装饰性瀑布拼图才适合。这一「视觉序 ≠ 焦点序」的问题（及 order /
z-index / reading-flow）见 排序与可达性。
3 · 放置语法速查
| 写法 | 含义 |
|---|---|
grid-column: 2 |
从第 2 线起，跨 1 格（默认 span 1）。 |
grid-column: 1 / 3 |
第 1 线到第 3 线，占 2 列。 |
grid-column: 2 / span 2 |
第 2 线起向后跨 2 列（不必算结束线号）。 |
grid-column: 1 / -1 |
首线到末线，通栏（无需知道总列数）。 |
grid-area: 2 / 1 / 4 / 3 |
简写 = row-start / col-start / row-end / col-end。 |
数线号易错且不易读；给单元起名字再落位更直观——见 grid-template-areas。放置完成后，项在各自单元内的对齐见 两轴对齐。