CSS 网格布局生成器
在网格画布上拖拽设计布局，实时生成 HTML 与 CSS Grid 代码。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传CSS Grid网格布局布局生成
🔒 全程本地运行 · 不上传任何数据拖拽画布绘制区块Ctrl / ⌘ + Z 撤销Ctrl / ⌘ + Shift + Z 重做
在下方画布空白单元格上按住拖拽即可创建区块；点击已有区块可选中并改名、调整跨行跨列。移动端建议使用「添加区块」按钮。
1. 网格设置
列宽（每列可单独设置）
行高（每行可单独设置）
模板库
2. 布局画布
输出模式
设备预览
提示：拖拽创建区块后，可在下方「区块属性」中修改名称与跨行跨列；画布宽度可切换为手机 / 平板尺寸以检查溢出。
3. 区块属性
尚未选中区块。点击画布上的区块或上方名称即可编辑。
4. 生成代码
工作原理
- 1设置列数与行数，并按需调整每列 / 每行的轨道尺寸与行列间距。
- 2在画布空白处按住鼠标拖拽，画出矩形区块，拖动过程中会实时预览占据范围。
- 3选中区块后重命名、调整跨行跨列或更换配色，画布与代码同步更新。
- 4选择输出模式（grid-template-areas / 显式定位 / 自动流），预览并复制生成的 HTML 与 CSS。
- 5切换设备宽度检查响应式表现，或导出 JSON 保存布局，稍后导入继续编辑。
常见问题
生成器会上传我的布局数据吗？
不会。所有计算、画布渲染与代码生成都在浏览器本地完成，页面不发起任何网络请求；未导出的布局只保存在本机 localStorage 中。
为什么有时输出的不是 grid-template-areas？
grid-template-areas 要求同名区域是完整矩形且相互连通。若区块名称非法、区块重叠或同名区域被拆开互不相邻，工具会自动改用 grid-column / grid-row 显式定位输出，并在校验区说明原因。
支持哪些轨道尺寸写法？
支持 fr、px、%、auto、min-content、max-content，以及 minmax(120px, 1fr)、repeat(3, 1fr) 等函数写法；非法写法会回退为 1fr，保证生成的 CSS 可用。
为什么固定列宽在窄屏会横向溢出？
固定 px 列宽加上间距的总和超过屏幕宽度时，网格无法继续压缩，就会出现横向滚动。校验区会给出提示，把固定列宽改成 fr 或 minmax() 即可解决。
撤销和重做能保留多少步？
最多保留最近 50 步操作，快捷键为 Ctrl / ⌘ + Z 撤销、Ctrl / ⌘ + Shift + Z 重做。
可以把布局发给同事继续编辑吗？
可以。点击「导出 JSON」下载布局文件，对方在「导入 JSON」中选择同一个文件，即可完整还原列数、轨道尺寸、间距与全部区块。