CSS网格生成器
可视化CSS Grid布局构建器。自定义列、行、间距和对齐方式。复制生成的CSS和HTML代码。
设置
Item Properties
预览
生成的代码
关于CSS网格生成器
可视化地排布 CSS Grid：设置最多各十二个的列与行，调整行间距和列间距，并输入 1fr、200px 或 auto 这类轨道尺寸。点击任意单元格即可为它设置跨度，生成明确的 grid-column 和 grid-row 起止值，预览随改随更新，同时对应的 CSS 和 HTML 也会一并写好、可直接复制。预设提供圣杯布局、侧边栏、仪表盘和卡片网格等常见布局作为起点。一切都在浏览器本地渲染。
使用场景
如何使用
从预设布局开始——圣杯布局、侧边栏、仪表盘、画廊、博客或卡片——也可以从零搭建网格。
在设置面板中拖动“列数”和“行数”滑块（1 到 12），以及“列间距”和“行间距”滑块（0 到 64px）。
编辑每一列、每一行的尺寸输入框，把 1fr 换成 250px、auto 或 minmax(200px, 1fr) 之类的值。
在预览中点击彩色区块将其选中，再设置它的起始列、结束列、起始行、结束行和标签，让它跨越多个单元格。
用两个对齐下拉框调整 justify-items 和 align-items，可选 stretch、start、center 和 end。
在“生成的代码”区域，用 CSS 按钮或 HTML 按钮取用结果，也可以点“全部复制”一次拿到标记和样式表。
专业提示
- 直接粘贴内容即可——CSS Grid 生成器会识别常见的输入格式并自动套用合理的默认设置。
- 善用快捷键（Ctrl/Cmd+A 全选、Ctrl/Cmd+C 复制），在CSS Grid 生成器中操作更高效。
- 输入内容特别大时建议分批处理——浏览器标签页通常能承载数 MB 的文本，但解析超大数据可能让界面短暂卡顿。
- CSS Grid 生成器不会记录或保存您的输入。需要留存记录的话，请把重要结果复制到本地文件或笔记应用中。
- 把CSS Grid 生成器与站内其他工具（格式化、转换、编码类）搭配使用，不离开浏览器就能完成整条数据处理流程。
常见问题解答
完全免费，无需注册，不用 API 密钥，没有水印，也没有使用次数限制。
不会。CSS Grid 生成器完全在您的浏览器本地运行，输入内容不会接触我们的服务器。
没有硬性上限，但输入超过几 MB 后速度会明显变慢，具体取决于设备的内存。
可以。用CSS Grid 生成器产出的结果归您自由使用，个人或商业项目都不受限制。
大部分逻辑都由本地 JavaScript 完成，页面首次加载之后，通常没有网络也能继续使用。
没有。CSS Grid 生成器在您的浏览器中运行，硬件跑得动就能处理多少输入，既不需要 API 密钥，也不会被限速。