可视化网格布局设计 · 列/行自定义 · 响应式断点 · 区域命名 · 6种预设
/* Grid 布局代码将显示在这里 */
CSS Grid（网格布局）是二维布局系统，同时处理行和列，是构建复杂页面结构的终极方案。ng.cc提供的在线Grid布局生成器，通过可视化控件调整列数、行高、间距、对齐方式、区域命名、响应式断点，实时预览布局效果并生成生产级CSS代码。无需记忆grid-template-columns等复杂语法，拖拽滑块即可完成响应式网格设计。
支持1-12列/行自由调整，列宽/行高支持fr、px、%、auto、minmax()等所有单位，任意组合。
通过grid-template-areas为每个单元格命名，相同名称自动合并，轻松实现圣杯、侧边栏等复杂布局。
内置4个预设断点，支持自定义添加。切换设备尺寸实时预览，自动生成@media查询代码。
基础网格、侧边栏、卡片网格、仪表盘、图库、圣杯布局，一键加载，快速原型。
| 属性 | 示例 | 说明 |
|---|---|---|
grid-template-columns | 1fr 2fr 1fr | 定义列宽，fr为剩余空间分配比例 |
grid-template-rows | 100px auto 80px | 定义行高 |
grid-template-areas | "header header" | 定义网格区域模板 |
gap | 20px 15px | 行间距和列间距 |
justify-items | center | start | end | stretch | 水平方向对齐 |
align-items | center | start | end | stretch | 垂直方向对齐 |
fr 是Grid布局特有的弹性单位，代表剩余空间的一份比例。例如 1fr 2fr 表示第二个列宽度是第一个的两倍。可与固定宽度混用：200px 1fr 1fr 表示第一列固定200px，剩余空间由后两列平分。
minmax(最小值, 最大值) 用于设置列宽或行高的范围。例如：minmax(100px, 1fr) 表示最小100px，最大占满剩余空间；minmax(200px, 300px) 表示固定范围。本工具支持您在列宽/行高输入框中直接使用此函数。
grid-template-areas 和 grid-area，可以用名称而非行列线来定位元素。例如将多个单元格命名为"header"，它们会自动合并成一个区域。这是实现圣杯布局、复杂仪表盘最优雅的方式。
repeat(3, 1fr)等表达式。本工具会将其原样传递到CSS代码中。例如您可以将3个1fr改为repeat(3, 1fr)，效果相同但代码更简洁。
grid-column: span 2等属性（需在项目上单独设置）；2. 使用网格区域命名，将多个单元格命名为相同名称。本工具主要支持第二种方式，更直观易用。
-ms-前缀，本工具生成的标准语法适用于绝大多数生产环境。
本工具是ng.cc开发者工具箱设计工具系列的一员，您可能还需要：
⚡ 所有工具均在浏览器本地运行，不存储任何用户数据，可放心用于商业项目。