CSS Grid 生成器

可视化 Grid 布局 / 实时预览 / 生成CSS代码

列数: 3

行数: 3

列间距: 10px

行间距: 10px

justify-items

align-items

justify-content

align-content

生成的CSS代码

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

CSS Grid布局简介

CSS Grid是强大的二维布局系统，可以同时控制行和列。通过grid-template-columns和grid-template-rows定义网格轨道，gap控制间距。本工具帮你可视化地调整参数并生成对应代码。如需一维布局可使用Flexbox生成器。