CSS Grid Generator
Build CSS Grid layouts visually.
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
}关于本工具
CSS网格布局生成器允许您通过调整grid-template-columns、grid-template-rows、间距和对齐设置来可视化设计二维网格布局。实时预览让您在编写代码前就能看到效果。
CSS Grid是CSS中最强大的布局系统，专为同时处理行和列的二维布局设计。它补充了处理单方向布局的Flexbox。此工具生成干净、可直接使用的CSS。
使用方法
- 设置grid-template-columns定义列结构，使用预设按钮快速选择常见模式。
- 可选设置grid-template-rows（大多数布局保持auto即可）。
- 调整column-gap和row-gap设置间距。
- 使用justify-items和align-items控制单元格内的项目对齐。
- 拖动滑块更改项目数量，观察网格如何响应。
- 点击复制按钮复制生成的CSS。
使用场景
前端开发者将CSS Grid用于页面布局、仪表板结构和图片画廊。设计师将网格规格导出为精确CSS与开发者共享。CSS学习者直观理解网格属性的交互方式。设计系统团队用于原型化间距和列模式。
常见问题
- 1fr是什么意思？ — fr是分数单位。1fr表示可用空间的一份。repeat(3, 1fr)创建三个等宽列。
- 什么时候用Grid，什么时候用Flexbox？ — 二维布局（行和列）使用Grid。单方向排列项目时使用Flexbox。
- CSS Grid所有浏览器都支持吗？ — 是的。自2017年起，CSS Grid在所有现代浏览器中完全支持。