首页
CSS 容器查询生成器
📦
CSS 容器查询生成器
可视化构建 @container 规则，设置容器名称与尺寸条件，生成即用代码片段
生成代码
重置
复制全部
只复制查询
容器设置
容器名称（可选）
container-type
inline-size（宽度查询，最常用）
size（宽高均可查询）
normal（仅样式查询）
容器选择器
查询条件
AND
OR
特性
比较
值
+ 添加条件
容器内 CSS 规则
目标选择器
CSS 声明（每行一条）
flex-direction: column; font-size: 0.875rem; gap: 8px;
输出选项
包含容器声明
添加注释
包含 @supports 降级
生成代码
/* 配置左侧参数后点击「生成代码」*/
复制
实时预览（拖动滑块改变容器宽度）
容器宽度
400px
预览元素
调整容器宽度以查看条件是否触发