CSS 与布局 / 🟩 CSS Grid · 二维布局与轨道模型 待审核 8 页

🟩 CSS Grid · 二维布局与轨道模型

Flexbox 沿单轴排布,Grid 则把容器先划成二维轨道网格,再把项放进由网格线围成的单元。本系列从轨道的定义讲起——fr 如何分配剩余空间、minmax() / repeat() / auto-fill 怎样组合出响应式列;再到放置(基于网格线、span、auto-placement 与 dense)、区域命名(grid-template-areas 字符画)、两轴对齐(注意 Grid 的 justify-* 管行内轴、与 Flex 的轴映射不同);最后两块进阶能力——subgrid 让嵌套网格继承父轨道、display: contents 让包裹层「消失」,它们正是「跨容器对齐到同一组列线」这一经典需求的两种解。每页都用真实 getComputedStyle / getBoundingClientRect 实测呈现引擎的实际行为。

系列脉络:

先把网格画出来——轨道与 fr(minmax / repeat / auto-fill vs auto-fit)→ 往格子里放项:基于网格线的放置(span / 负向线号 / grid-auto-flow: dense)→ 用 grid-template-areas把布局画成字符画 → 理清 Grid 的两轴对齐(行内轴 justify-* vs 块轴 align-*,与 Flex 相反)→ 看 grid-item 如何脱离源码顺序:order / z-index 与 reading-flow(视觉序与可达性)→ 进阶:subgrid让嵌套网格对齐父轨道、display: contents让中间层穿透 → 收束于一个实战:同一份「三列对齐列表」的四种实现对照。 tracks · 轨道

定义轨道：fr、minmax、repeat 与 auto-fill / auto-fit

fr 分的是剩余空间而非容器宽度；repeat 配 minmax 与 auto-fill / auto-fit 则据容器宽自动决定列数。

 placement · 放置

放置：基于网格线、span 与 auto-placement

网格线从 1 起编号、也可从尾部负向计数；未定位的项由 auto-placement 逐格填入，dense 会回填空洞。

 areas · 区域命名

grid-template-areas：把布局画成字符画

grid-template-areas 用名字画出版式，每个名字的格子必须连成矩形，否则整条声明被判为非法。

 alignment · 两轴对齐

两轴对齐：justify- 管行内轴、align- 管块轴

justify 与 align 两组属性分三层：items 管单元内、content 管轨道整体、self 覆盖单个项。

 reading-flow · 序与可达性

视觉顺序与源码顺序：order、z-index 与 reading-flow

order 与网格放置只改视觉顺序，Tab 焦点与朗读顺序仍按 DOM；reading-flow 才让焦点跟随视觉。

 subgrid · 继承父轨道

subgrid：让嵌套网格对齐到父级的同一组线

子网格声明 subgrid 后不再自定义轨道，而是沿用父网格在该跨度内的轨道线，跨卡片的行因此天然对齐。

 display: contents · 穿透

display: contents：让包裹层消失，子项直上父网格

display contents 让包裹层自身不生成盒子、子元素上移成为父网格的项，是 subgrid 之前的常用替代。

 实战 · 三列对齐列表

同一份「配额进度列表」的四种实现对照

同一个三列对齐需求的四种做法对照：表格布局两种、grid 配 display contents、grid 配 subgrid。

一条贯穿全系列的主线。

「让分散在多行 / 多个子树里的内容,对齐到同一组列线」是 Grid 最常被需要、也最容易出错的能力。从早年的 display: table,到 grid + display: contents 穿透包裹层,再到 subgrid 直接继承父轨道——解法一路演进,核心始终是谁来定义那组共享的轨道线、谁去采用它。读完subgrid、display: contents 与实战页,这条线就完整了。

🔗 相关链接

📐 规范 / 文档

🎨 实例与文章(本系列灵感来源)