下一代 CSS 布局：容器查询、子网格与现代模式
在过去的十年里，“响应式设计”几乎等同于媒体查询（Media Queries）。我们观察整个浏览器窗口（视口）的宽度，并据此调整布局。但随着 Web 应用变得越来越组件化（React, Vue, Web Components），这种方法成为了主要的瓶颈。
现代 CSS 终于通过**容器查询（Container Queries）以及子网格（Subgrid）**和 Aspect-Ratio 等强大功能解决了这一难题。
1. 容器查询：模块化设计的“圣杯”
想象你有一个 Card 组件。你希望它在较宽时显示侧边栏，在较窄时显示堆叠布局。使用媒体查询，Card 并不知道它自己有多宽；它只知道窗口有多宽。如果你在桌面屏幕的一个狭窄侧边栏中放入这个卡片，它就会布局崩溃。
容器查询允许组件根据自身的大小做出响应。
如何使用：
首先，定义一个容器：
.card-wrapper {
container-type: inline-size;
container-name: card-container;
}
然后，为内部的组件编写查询：
@container card-container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
现在，无论屏幕大小如何，卡片都会根据 .card-wrapper 中的可用空间来更改其布局。
2. CSS 子网格（Subgrid）：对齐以往无法对齐的元素
CSS Grid 非常强大，但它有一个主要限制：嵌套网格无法轻松与父网格对齐。如果你有一组带有标题和页脚的卡片，并且希望所有标题无论内容多少都保持相同的高度，以前这很难实现。
Subgrid 解决了这个问题，它允许子元素“继承”其父元素的行或列。
示例：
.grid-parent {
display: grid;
grid-template-rows: auto 1fr auto; /* 标题, 内容, 页脚 */
}
.card {
grid-row: span 3; /* 占据父网格的 3 行 */
display: grid;
grid-template-rows: subgrid; /* 使用父网格的行大小！ */
}
通过 grid-template-rows: subgrid，同一行中的所有 .card 元素的标题和页脚都会完美对齐，即使它们的内部内容长度各不相同。
3. 使用 aspect-ratio 控制比例
在有这个属性之前，为视频保持 16:9 比例或为头像保持 1:1 比例需要使用 padding-top 等“黑科技”。现在，只需简单一行代码。
.video-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
这对防止**布局偏移（CLS）**至关重要，因为浏览器可以在图片或视频加载完成之前就预留出正确的空间。
4. 现代 Flexbox 和 Grid 模式
现代 CSS 还为现有的布局引擎带来了虽小但强大的改进：
Flexbox 的 gap 属性
不再需要为除了最后一个子元素以外的所有元素设置 margin-right。直接使用 gap 即可。
.flex-container {
display: flex;
gap: 1rem;
}
逻辑属性（Logical Properties）
用 inline 和 block 来思考，而不是 left, right, top 和 bottom。这使得支持从右到左（RTL）的语言变得自动化。
.element {
margin-inline-start: 20px; /* 在 LTR 中是 margin-left，在 RTL 中是 margin-right */
padding-block: 10px; /* 等同于 padding-top 和 padding-bottom */
}
5. 性能与浏览器支持
截至 2024 年，容器查询、子网格和 Aspect-Ratio 已得到所有主流浏览器的支持。对于开发者来说，这意味着我们终于可以停止使用笨重的 JavaScript Resize Observer 和复杂的网格 Hack 了。
结果是什么？ 更小的 CSS 文件、更好的性能以及更易于维护的代码库。
常见问题 FAQ
问：我应该停止使用媒体查询吗？
答： 不。媒体查询仍然是高级页面布局的最佳工具（例如，“主导航应该是顶部栏还是侧边栏？”）。容器查询用于组件级布局（例如，“这张卡片在这个特定容器中应该长什么样？”）。
问：子网格（Subgrid）在所有浏览器中都能用吗？
答： 是的！虽然它是这些特性中最后一个获得普及支持的，但现在它已在 Chrome、Safari 和 Firefox 的最新版本中可用。
问：我可以将容器查询用于字体排版吗？
答： 可以！你可以使用容器查询单位，如 cqi（容器查询内联大小），使文本大小相对于容器宽度，这通常比视口单位（vw）更有用。
用更少的代码构建更多功能
现代 CSS 布局工具旨在协同工作。通过结合 Grid、Subgrid 和容器查询，你可以构建出几年前还不可能实现或极其脆弱的布局。
准备好测试你的新布局了吗？查看我们的 CSS 布局可视化工具 看看这些概念的实际效果。