Grid 项目定位

Grid 项目可以按网格线、命名区域或跨越数量定位。先画出行列线，再选择最能表达设计意图的方式；不要为了得到视觉位置而写一串难以维护的数字。

.hero { grid-column: 1 / -1; }
.sidebar { grid-column: 1; grid-row: 2 / span 2; }
.content { grid-area: 2 / 2 / 4 / 4; }

1 / -1 表示从第一条线到最后一条线，span 表示跨越数量。命名区域适合稳定的页面骨架，自动放置适合重复卡片。显式定位与响应式断点结合时，要确认窄屏下是否仍然存在相应轨道。

实验与练习

用同一页面分别采用数字线、span 和命名区域放置页眉、侧栏与正文。改变列数后检查哪些规则仍然成立，记录一次显式定位与自动放置冲突的结果。

可运行微实验：网格线、span 与自动放置

<div class="layout"><header>Header</header><aside>Aside</aside><main>Main</main></div>
<style>
.layout { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: 48px 160px; gap: 8px; }
header { grid-column: 1 / -1; }
aside { grid-column: 1; grid-row: 2; }
main { grid-column: 2; grid-row: 2; }
</style>

在 DevTools Layout 面板打开网格线，记录 header 跨越的线号和 main 的轨道。把两列改成 1fr 2fr，计算内容区的比例；再删除 main 的显式定位，观察自动放置如何改变 DOM 顺序。窄屏时改为单列，并检查视觉顺序是否仍与键盘顺序一致。

常见错误

• 把网格线编号当成永远不变的设计契约。
• 只调整桌面列数，忘记移动端定位规则。
• 用定位数字掩盖内容顺序与视觉顺序不一致。

继续阅读

下一篇把元素从正常流中移出，比较相对、绝对和固定定位：定位机制。

练习

1. 用最小输入复现“Grid 项目定位”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案