CSS Grid布局生成器
千寻网 CSS Grid 布局生成器，可视化调整行数列数、行列尺寸（px/fr/auto）、行列间距、对齐方式，实时预览网格并一键复制 CSS 代码，Grid 布局学习必备。
列（columns）
3
行（rows）
3
间距（gap）
12px
12px
项目对齐
CSS 代码
3 列 × 3 行
Grid 速查表
| 属性 | 作用 | 常用值 |
|---|---|---|
| display | 声明为网格容器 | grid / inline-grid |
| grid-template-columns | 列定义 | 1fr 1fr 1fr / 100px 1fr / repeat(3, 1fr) |
| grid-template-rows | 行定义 | 100px 200px / repeat(3, 1fr) |
| gap | 行列间距 | 10px / 10px 20px（行 列） |
| justify-items | 单元格水平对齐 | start / center / end / stretch |
| align-items | 单元格垂直对齐 | 同上 |
| justify-content | 整个网格水平对齐 | start / center / space-between 等 |
| grid-area | 项目位置（合并单元格） | 1 / 1 / 3 / 3（行起/列起/行止/列止） |
使用说明
- fr 单位：Grid 特有，表示「剩余空间的份数」。
1fr 2fr表示第二列是第一列的 2 倍宽。 - auto：由内容决定尺寸。
- repeat()：快速定义重复的列/行，如
repeat(3, 1fr)等价于1fr 1fr 1fr。 - 响应式：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))可自适应列数。 - Grid 适合二维布局，Flexbox 适合一维布局。