Grid 布局生成器

可视化配置 CSS Grid 行列模板与网格项跨度，实时预览并复制完整 CSS 代码。

快速构建行列
编辑网格项 1
1
2
3
CSS 代码
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

.item-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.item-2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

.item-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}