CSS 容器查询：让卡片组件按自己的宽度排版

媒体查询看的是视口宽度，可同一个卡片组件，放在主栏里很宽，放在侧栏里很窄。容器查询（Container Queries）让组件根据父容器的宽度切换布局，组件放到哪里都能自己排好。Chrome、Edge、Safari 和 Firefox 的现行版本都已支持。

基本用法

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

.card {
  display: grid;
  gap: 12px;
}

@container cards (min-width: 520px) {
  .card {
    grid-template-columns: 160px 1fr;
  }
}

上面的卡片默认上下排列；当 .card-list 宽度达到 520px 时，图片和文字改为左右排列。和视口多宽没有关系。

几个要点

• container-type: inline-size 只把横向尺寸作为查询条件，最常用。size 会让容器在两个方向上都不再由内容撑开，一般用不到。
• 容器查询只能改变容器的后代元素，容器自己不能根据自己的尺寸改样式。需要的话在外面再包一层。
• container-name 可以省略，省略时匹配最近的容器祖先；页面里容器嵌套多了以后，起名字更不容易出错。
• 单位 cqi 表示容器宽度的 1%，适合随容器缩放的字号：font-size: clamp(14px, 4cqi, 18px);。

兼容旧浏览器

先把窄布局写成默认样式，再用 @container 增强宽布局。不支持容器查询的浏览器会停留在默认布局上，不会错乱。