可视化设计 CSS Grid 布局。设置行、列、间距和区域 — 即时复制可用的 CSS 代码。完美适用于响应式网页设计。100% 免费，纯前端运行。
CSS Grid 生成器是一个可视化工具，用于设计响应式网格布局。CSS Grid 是一个强大的二维布局系统，允许您在行和列中排列内容，并对大小、间距和定位进行精确控制。此生成器可帮助您可视化创建网格模板，具有实时预览和即时 CSS 输出功能。无论您是在构建仪表板、照片画廊还是复杂的页面布局，CSS Grid 都能提供您所需的灵活性。所有处理都在您的浏览器中进行 — 不会发送任何数据。
CSS Grid Layout 是一个用于 Web 的二维布局系统。它允许您将元素排列在行和列中，并对大小、定位和层级进行精确控制。与 Flexbox（一维）不同，Grid 同时处理水平和垂直对齐，使其成为复杂页面布局、仪表板和卡片网格的理想选择。
fr 单位（分数）是 CSS Grid 引入的一种灵活长度单位。它表示网格容器中可用空间的一部分。例如，repeat(3, 1fr) 创建三个等宽列，均分可用空间。您可以将 fr 单位与固定大小（如 200px）或 minmax() 组合使用，以实现强大的响应式布局。
minmax() 函数为网格轨道定义大小范围。它接受两个值：最小值和最大值。例如，minmax(200px, 1fr) 表示轨道至少为 200px 宽，但可以增长到剩余空间的 1fr。这对于需要最小尺寸但也需要灵活性的响应式设计非常完美。
是的。CSS Grid 支持所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 和移动浏览器。生成的代码使用标准 CSS Grid 语法，当前浏览器版本不需要供应商前缀。