Grid布局生成器
可视化配置CSS Grid网格布局属性，实时预览布局效果，一键复制生成的CSS代码。
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
}
关于Grid布局生成器
CSS Grid Layout（网格布局）是CSS中最强大的二维布局系统，通过可视化配置容器属性，您可以直观理解各个属性对布局的影响，并快速获取可用的CSS代码。
常用属性说明
- grid-template-columns：定义列的大小和数量
- grid-template-rows：定义行的大小和数量
- gap：定义网格项之间的间距
- justify-items：定义网格项在单元格内的水平对齐
- align-items：定义网格项在单元格内的垂直对齐
- justify-content：定义整个网格在容器内的水平对齐