CSS Subgrid 实践：对齐不是每个组件自己算一遍

CSS Subgrid 实践：对齐不是每个组件自己算一遍

复杂页面里，卡片、表单、列表和详情区经常需要共享对齐关系。过去常见做法是每个组件内部写自己的 grid，最后标题、标签、内容和按钮差几个像素。subgrid 的价值，是让子元素继承父 grid 轨道，减少重复计算。

对齐不是每个组件自己算一遍。能共享网格，就应该让布局关系显式表达。

一、Subgrid 解决什么问题

flowchart TD
  A[Parent Grid] --> B[Card A]
  A --> C[Card B]
  B --> D[Subgrid Columns]
  C --> E[Subgrid Columns]

多个卡片内部内容要对齐时，如果每个卡片都定义自己的列宽，就很容易不一致。subgrid 可以让内部内容沿用父级轨道。

二、基础写法

.settings {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px 16px;
}

.setting-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

每一行占满父 grid，然后内部使用 subgrid。标签、输入和操作按钮就能稳定对齐。

三、表单布局很适合 subgrid

设置页、筛选器、属性面板这类 UI，常见结构是 label、control、hint/action。

<section class="settings">
  <div class="setting-row">
    <label>显示密度</label>
    <select></select>
    <button>重置</button>
  </div>
</section>

如果 label 宽度由父级控制，所有行的输入控件起点会一致。视觉上更稳，也更容易扫描。

四、兼容性要提前确认

subgrid 已经逐渐可用，但仍要根据目标浏览器确认。对不支持环境，可以准备退化布局。

@supports not (grid-template-columns: subgrid) {
  .setting-row {
    grid-template-columns: 160px 1fr auto;
  }
}

退化方案不一定完美，但至少不能让布局散掉。新 CSS 能力进入生产前，兼容性检查是必要步骤。

使用 subgrid 时，还要避免把布局责任藏得太深。父 grid 的列定义一旦变化，所有子行都会受影响。组件文档里应说明它依赖父级轨道，避免被单独拿到其他容器里使用时出现不可预期布局。

.setting-row {
  /* Requires parent grid with label/content/action columns. */
  grid-template-columns: subgrid;
}

这类注释不多，但能提醒维护者：这个组件不是完全独立布局单元。

五、总结

CSS Subgrid 适合处理父子布局需要共享轨道的场景，特别是设置页、表单、卡片组和属性面板。它能减少重复列宽定义，让对齐关系更稳定。

布局对齐不是像素猜谜。用 subgrid 把关系写出来，页面会少很多微妙的错位。

当页面里有大量重复行和复杂字段时，subgrid 带来的不是炫技，而是稳定的视觉秩序。对齐关系越明确，后续扩展字段越轻松。

这种轻松，来自布局规则终于有了共同参照。