CSS Grid生成器
交互式创建CSS Grid布局。
1
2
3
4
5
6
7
8
9
列3
行3
Column gap8px
Row gap8px
单击单元格展开
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}CSS Grid布局可视化生成器
CSS Grid Layout是CSS中最强大的二维布局系统。与只能在单轴（行或列）工作的Flexbox不同，CSS Grid可以同时控制行和列，非常适合创建整页布局、图片画廊、仪表板以及任何需要精确可预测网格结构的设计。
我们的可视化生成器允许你定义列数和行数，使用fr、px、%或auto等单位自定义尺寸模板（grid-template-columns和grid-template-rows），调整单元格间距（column-gap和row-gap），以及使用grid-column: span和grid-row: span扩展单个单元格以跨越多列或多行。
预览实时更新，精确展示你的Grid布局效果。点击任何单元格选中它，使用扩展控件使其跨越多列或多行。生成的CSS代码包含复制预览中精确布局所需的所有属性，可直接复制使用。
常见问题
“fr”单位是什么意思？
“fr”（fraction，分数）单位表示Grid容器中可用空间的一个比例。例如，“1fr 2fr”创建两列，其中第二列宽度是第一列的两倍。它类似于flex-grow，但在定义比例时更加直观。
CSS Grid能替代Flexbox吗？
不能，它们是互补的。Grid更适合二维布局（行和列），而Flexbox更擅长一维布局（单行或单列）。通常使用Grid进行页面整体结构布局，使用Flexbox在每个区域内对齐内容。
如何让一个单元格跨多列？
在我们的工具中，点击单元格并使用“+”按钮来扩展。在CSS中，通过“grid-column: span 2”（跨2列）或“grid-row: span 2”（跨2行）实现。也可以用“grid-column: 1 / 3”指定精确位置。
想了解更多？ 阅读我们的完整指南 →