第 9 课 23 / 25 ｜ 编码：L09-90
现代 CSS 拓展 · 容器尺寸查询

容器查询：按卡片所在空间排版

浏览器窗口不变，只拖动下面的滑块：活动标题与地点会在上下排列、左右排列之间切换。

① 指定容器，默认排成一列

.host { container-type: inline-size; }
.card {
  display: grid;
  grid-template-columns: 1fr;
}

本例横向书写：inline-size 对应父容器的内容宽度。

② 容器足够宽时，切换为两列

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

父容器内容宽 ≥ 420px 时，卡片按 2∶1 分成两列。

思考：边框盒宽 420px 时，显示几列？

本例外层使用 box-sizing: border-box，左右边框各 2px、内边距为 0。显示一列还是两列？

@media 的宽度条件看文档视口；这里的 @container 看父容器。.host 是父容器，规则改变的是内部 .card 的排列。

展开参考分析

一列。内容区宽度为 420 − 2 − 2 = 416px，尚未达到 420px。边框盒达到 424px、实际空间又足够时，内容区才达到 420px，切换为两列。

若浏览器不支持容器尺寸查询，仍使用默认的一列。布局没有依靠 JavaScript 判断宽度；演示脚本只负责调整容器尺寸和显示测量值。

延伸阅读：MDN · CSS container queries（新标签页）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries

完整代码：修改 .host 的 width 并运行 
<style>
.host {
  box-sizing: border-box;
  width: 560px;
  max-width: 100%;
  padding: 0;
  border: 2px solid teal;
  container-type: inline-size;
}
.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px 10px;
}
@container (min-width: 420px) {
  .card {
    grid-template-columns: 2fr 1fr;
  }
}
</style>

<div class="host">
  <article class="card">
    <h2>黄梅戏分享会</h2>
    <p>周三 14:00 · A208</p>
  </article>
</div>