Grid 布局生成器

可视化拖拽创建 CSS Grid 布局，生成 CSS 和 Tailwind 代码

快捷键：⌘S 保存 · ⌘C 复制 · Delete 删除最后区域

配置参数

预设模板

行数

列数

行间距16px

列间距16px

网格画布

已合并

选中

空白

代码输出

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px 16px;
}