代码、数据与二维码工具

容器查询助手

选择父级类名、容器名称、阈值和固定布局预设,然后复制配对 CSS。

优先本地处理无需注册隐私说明 ↗

123456

使用步骤

如何使用

  1. 输入有效的 ASCII CSS 标识符并选择阈值。
  2. 选择子布局的列数和间距。
  3. 查看本地调整大小预览并复制 CSS。

配对 CSS 合同

助手会在父级添加 container-type: inline-size,并为子级类名生成带名称的 @container 规则。不接受任意 CSS 代码体。

本地预览边界

可将示例容器从 100 调整到 1200px。若浏览器不支持 CSS 容器查询,预览会明确显示。

常见问题

你可能还想知道

父级声明有什么作用?

它会将父级设为 inline-size 容器查询容器。

可以粘贴自己的 CSS 吗?

不可以。助手使用固定且安全的布局预设,不接受任意 CSS 输入。