现代 CSS 布局：容器查询与 Subgrid 实战

布局的新武器

过去实现"卡片内部元素随容器宽度调整"要靠 JS 监听尺寸，如今纯 CSS 就能搞定。这篇聊两个已广泛可用的现代布局特性：容器查询与 Subgrid。

Container Queries：组件级响应式

媒体查询响应的是视口，容器查询响应的是父容器。这让组件真正可复用——同一个卡片放进宽栏是横排，放进窄侧栏自动变竖排。

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

/* 当容器宽度 ≥ 400px */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 8rem 1fr;
  }
}

组件不再需要知道自己被放在哪里，只需关心"我有多宽"。

Subgrid：对齐嵌套网格

普通嵌套 grid 的子项无法对齐到父网格线。Subgrid 让子网格"借用"父级的轨道：

.list {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

这样每个 item 内部的三列都会和其它 item 精确对齐，做表格式卡片列表时特别有用。

配套好东西

• :has() 父选择器：.card:has(img) 可以根据子元素改变父样式，被称为"CSS 的 if"。
• clamp() 流式排版：font-size: clamp(1rem, 2vw + 1rem, 2rem) 一行搞定响应式字号。
• aspect-ratio：告别 padding-top 百分比 hack。

.title {
  /* 最小 1rem，随视口放大，最大 2rem */
  font-size: clamp(1rem, 2vw + 1rem, 2rem);
}

兼容性

上述特性在现代浏览器（2023+）已全面支持。若需兼容旧环境，用 @supports 渐进增强：

@supports (grid-template-columns: subgrid) {
  /* 现代布局 */
}

现代 CSS 的趋势很清晰：把过去要 JS 的布局逻辑还给样式层。少一分运行时，多一分健壮。