CSS容器查询生成器介绍
CSS容器查询生成器用于基于容器宽度而非视口宽度进行响应式布局，适合卡片组件、模块化区块与可复用组件系统。工具支持自定义容器名称、触发宽度、列数与间距，生成可直接使用的容器查询CSS与HTML结构。
主要参数说明
- Container Name：设置容器名称，用于 @container 规则匹配。
- Min Width (px)：设置容器宽度达到该值时触发布局变化。
- Columns：设置容器满足条件后显示的列数。
- Gap (px)：设置卡片或网格的间距。
使用教程
- 配置容器：填写容器名称与最小宽度阈值。
- 设置布局：选择列数与间距，定义布局变化。
- 预览效果：Preview 中展示容器查询的布局变化。
- 复制代码：在 CSS 与 HTML 标签页复制生成代码。
应用场景
- 组件式布局：让组件在不同容器宽度下自适应。
- 卡片网格：在不同模块宽度下自动调整列数。
- 设计系统：构建更细粒度的响应式策略。
