CSS Grid 区域布局生成器
CSS Grid 布局版聚焦命名区域：在画布上圈出 header、sidebar、main、footer 等区块，工具据排布生成 grid-template-areas 与各子项的 grid-area 声明，用来直接刻画整页骨架而不必手算行列跨度。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 在画布上划分命名区域块
- 给每个区域指定跨行列
- 关联子项 grid-area 名称
- 复制 areas 模板声明
典型场景
绘制后台整体页面骨架分区
落地页页头侧栏正文页脚布局
杂志式多区块错落版面编排
常见问题
区域名怎么对应子元素？
子项用 grid-area 写同名即可落到对应区块。
能嵌套网格吗？
每个区域内部可再声明子网格，逐层搭建版面。
与另两个 Grid 工具有何区别？
本工具产出命名区域骨架，另两个偏轨道数值与流式列数。