现代 CSS 布局实战：Grid、子网格与容器查询

到了 2026 年，"布局"已经很少需要开发者手写 Hack 了。CSS Grid 与 Flexbox 早已是 Baseline 特性，子网格（subgrid）与容器查询（container queries）也完成了主流浏览器支持。对建站团队来说，这意味着一件事：页面结构应该直接用 CSS 系统的能力表达，而不是靠额外 DOM、负 margin 或 JS 补丁来凑。

这套能力是前端搭建分类的核心基础。若想把这些布局知识与实际页面模板结合，可参考HTML 页面模板；关注 2026 年其它进入稳定版的布局特性，可阅读CSS 间隙装饰。

Grid 与 Flexbox：分工而非替代

两者不是竞争关系，而是不同维度：Grid 擅长二维（行列同时控制），Flexbox 擅长一维（主轴对齐与分布）。成熟的实践是外层用 Grid 划分大区，内部用 Flexbox 做单行对齐，例如导航、按钮组、卡片内的元信息行。响应式断点上通常只需调整 Grid 的列数，Flexbox 内部无需改动。

子网格：让嵌套网格与父级对齐

按 MDN 的定义，当某个网格项自身又声明了 display: grid 时，它默认会创建一套与父级完全独立的轨道，导致嵌套内容很难与外部网格对齐。而 subgrid 让嵌套网格复用父级已定义的轨道（尺寸与间距一并继承），从而让不同层级的元素精确对齐。

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 20px;
}

.item {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid; /* 复用父级 5 列轨道 */
}

.subitem {
  grid-column: 3 / 6;
}

子网格（grid-template-columns: subgrid 与 grid-template-rows: subgrid）已进入 Baseline Widely available（Chrome 117、Firefox 71、Safari 16 起全线支持）。它最适合以下场景：

  • 表格型卡片：卡片行内多列内容需要与页面整体网格对齐；
  • 表单标签列：多个字段的标签宽度保持一致；
  • 列表项内部对齐：评论、订单条目中的图标、时间、状态列对齐。

需要注意：在 subgrid 的维度上不会自动创建隐式轨道，项目超出网格单元时会落入最后一条轨道，数量不确定时建议保留一个维度为普通嵌套网格。

容器查询与容器查询单位

容器查询让组件根据自身容器宽度而非视口来响应变化。先给父级声明 container-type: inline-size，再在子元素上用 @container 写条件：

.card-list {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}

配合容器查询的还有一组容器查询单位：cqi 是容器内联尺寸（通常为宽度）的 1%，cqb 是块尺寸的 1%，cqmin/cqmax 分别取两者较小/较大值（详见 CSS-Tricks 的说明）。它们比 vw/vh 更适合描述"相对父容器"的尺寸，例如让卡片字体、内边距随容器缩放：

.card { font-size: 2cqi; padding: 3cqw; }

容器查询与媒体查询是互补关系：页面级布局用媒体查询，组件级细节用容器查询。这样组件拿到任何页面上都能自我适配，天然具备可复用性。

逻辑属性：让布局适配书写方向

逻辑属性（logical properties）用 inline/block 语义替代物理方向：margin-inline-start 代替 margin-left，inset-inline 代替 left/right。在中文、英文等横排页面里两者结果一致，但一旦站点需要支持阿拉伯语、希伯来语等从右向左的书写模式，物理属性会全部错位，逻辑属性则自动翻转。对多语言站点，这是低成本高回报的投资。

把它们组合起来：一个后台卡片看板

技术单独看容易，难在组合。以一个常见的管理后台看板为例：页面用 Grid 划分出侧栏与主区，主区内是若干张卡片，每张卡片内部又要让“标题、时间、状态”三列与整行对齐。这里正好把三种能力串起来：

.dashboard { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.cards { container-type: inline-size; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@container (max-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }   /* 容器变窄时自动降列 */
}

.card { display: grid; grid-template-columns: subgrid; }
.meta { display: flex; justify-content: space-between; }   /* 单行内用 Flexbox */

外层 Grid 负责整体骨架，容器查询让“主区收窄时卡片降列”自动发生，子网格保证卡片内的三列与页面网格对齐，最后一行用 Flexbox 处理单行元信息。四种能力各管一段，没有一处依赖负 margin 或 JS。这也回答了常见的疑问：当页面与组件两条适配轴线并存时，媒体查询管页面、容器查询管组件、Grid 管骨架、Flexbox 管单行，各司其职。

参考：MDN 容器查询文档 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
参考：Can I Use — Subgrid https://caniuse.com/css-subgrid

布局体系的组合建议

  1. 移动优先：先写单列基准样式，再用 min-width 媒体查询逐级放大；
  2. 渐进增强：容器查询等较新特性用 @supports 包裹，旧浏览器回退到 Flexbox 或单列；
  3. 复用组件：把卡片、列表项封装成独立组件，让容器查询在内部完成适配；
  4. 检查兼容性：上线前用 BrowserStack 或 Can I Use 核对目标用户浏览器（国内用户建议额外关注国产浏览器的内核版本）。

16IDC 观察

布局能力的每一次"去补丁化"，都在直接降低建站成本。对用建站技术或纯 HTML/CSS 搭建页面的团队来说，紧跟这些 Baseline 级特性，比引入更大的框架更划算。需要完整的分步检查清单时，可对照响应式布局检查清单逐项验收。

原文来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid