CSS Grid 生成器

可视化构建 CSS Grid 布局，并复制简洁的 CSS 和 HTML

预览

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

列间距16px

行间距16px

在预览中选择一个项目，即可设置它跨越的列数和行数。

项目水平对齐

项目垂直对齐

高级

轨道水平对齐

轨道垂直对齐

最小高度

0 表示不设置 min-height。fr 行需要有高度才能填充。

编辑时预览和代码会同步更新。

什么是 CSS Grid 生成器？

一个可视化的 CSS Grid 布局构建器。可以用 fr、px、%、auto、minmax() 或经过验证的自定义值设置列和行的尺寸，涂出命名区域，或构建 auto-fit 响应式卡片网格。预览是一个真实的 CSS Grid 容器，使用与生成代码相同的声明，所见即所得。

使用方法

命名区域与校验

每个命名区域都必须是一个完整的矩形，否则浏览器会忽略整条 grid-template-areas 声明。本工具会说明哪个区域违反了规则，并在修正前让预览和代码保留上一次有效的布局。自定义轨道尺寸会在应用前进行校验。

限制

最多 12 列、12 行和 48 个项目。自定义尺寸支持长度、百分比、fr、auto、min-content、max-content、minmax() 和 fit-content()；不支持 calc()、var()、网格线名称以及单个轨道中的 repeat()。布局只保存在当前浏览器中。