CSS 网格生成
按容器宽度生成自适应卡片网格，预览窄容器并复制 CSS。
浏览器本地处理输入网格参数输出CSS
- 1添加输入
- 2调整设置
- 3获取结果
工具输入和文件在当前浏览器处理，不会上传。
开始之前
设置卡片最小宽度与间距，在窄容器和当前可用宽度中查看有内容的卡片，再复制自动排布等宽列的 CSS。
如何使用
- 填写卡片最小宽度、间距和预览卡片数。
- 比较 280px 窄容器与当前可用宽度下带内容的卡片。
- 生成 CSS，复制或下载，再放进目标容器核对。
支持范围与限制
卡片最小宽度 120–600px，间距 0–64px。预览卡片数 1–12，仅影响示例，不改变 CSS。
auto-fit 会拉伸剩余卡片，行数由内容决定。请在最终容器里测试连续长文本。
CSS 在此浏览器生成，无需注册。
操作示例
示例输入
示例参数
{"minWidth":220,"gap":16,"items":4}示例输出
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 16px;
}
.grid > * {
min-width: 0;
}出现问题时
修正数字输入，再用实际卡片和容器测试复制的 CSS。
常见问题
网格需要视口断点吗？
不需要。auto-fit 根据容器宽度排出等宽列；min(100%, 宽度) 让单列能收缩到较窄容器。
预览卡片数会固定行数吗？
不会。卡片数只填充预览，行数随内容生成；auto-fit 会收起空列。
很长的内容仍可能溢出吗？
可能。生成的 CSS 为直接子项设置 min-width: 0，但连续不换行的词或固定尺寸子项仍可能需要额外的换行或尺寸规则。