Grid 布局生成

快速构建复杂的 CSS Grid 网格布局

1
2
3
4
5
6
7
8
9
.grid-container
Grid Boilerplate
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
网格布局设置

水平间距 (Column: 16px)

垂直间距 (Row: 16px)

Grid 魅力

CSS Grid 是网页二维布局的最强方案。通过 repeat() 和 fr 单位，您可以轻松创建自适应的响应式网格。