Container Queries 是独立于 Grid 的机制，由 @container 规则提供；Grid 本身不支持基于容器尺寸的响应式列定义，因其 grid-template-columns 无法条件计算容器宽度。
container 查询本身不是 CSS Grid 的能力，而是 @container 规则提供的容器查询（Container Queries）机制，它和 display: grid 是正交的两个特性。你不能“用 CSS Grid 实现容器查询布局”，但可以 在容器查询内部使用 Grid 布局 —— 这才是实际可行且推荐的做法。
为什么不能直接用 grid-template-columns 响应容器宽度？
Grid 的 grid-template-columns 不支持基于父容器尺寸的条件计算（比如“当容器宽 @media）或显式设置的固定值/弹性单位。如果你试图靠 minmax() 或 auto-fit “模拟”容器查询，结果往往是不可控的：列数可能意外增减、内容被裁剪、fr 分配失衡，尤其在嵌套或动态内容场景下。
@container + display: grid 的正确配合方式
必须先启用容器查询上下文，再在该上下文中定义 Grid 布局。关键三步：
- 给目标容器添加
container-type: inline-size（或size），并可选加container-name - 用
@container规则包裹针对该容器的样式块 - 在规则内设置
display: grid及其相关属性（grid-template-columns、gap等）
示例：
立即学习“前端免费学习笔记（深入）”；
.card {
container-type: inline-size;
container-name: card;
}
<p>@container card (width < 400px) {
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
}</p><p>@container card (width >= 400px) {
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}注意：.card-grid 必须是 .card 的直接子元素（或满足容器查询作用域），否则查询不生效。
容易踩的坑：容器查询不是媒体查询的平替
常见错误包括：
- 对非容器元素（比如未设
container-type的 div）直接写@container—— 浏览器会忽略整条规则 - 把
container-type: size用在没有明确宽高的元素上 —— 容器查询无法获取尺寸，退化为无效 - 在
@container中修改父容器自身尺寸（如width或padding）—— 可能触发循环计算，部分浏览器渲染异常 - 误以为
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))能替代容器查询 —— 它只响应网格容器自身可用空间，不感知外部容器尺寸变化
兼容性与降级处理要点
目前（2026 年中）@container 在 Chrome 105+、Firefox 119+、Safari 16.4+ 支持良好，但 IE 和旧版 Android WebView 仍不支持。真实项目中必须考虑降级：
- 用
@supports (container-type: inline-size)包裹容器查询代码，避免语法错误 - 基础布局用
display: grid+minmax()或flex实现，容器查询仅作增强 - 避免在容器查询内使用尚未广泛支持的 Grid 新特性（如
subgrid），除非已确认目标环境支持
真正复杂的响应式网格行为，依赖的是容器查询触发时机 + Grid 布局能力的组合，而不是 Grid 单独扛起“按容器尺寸切换”的责任。
