html网格布局四列三行,html – 网格布局中的中心列

如果使用CSS网格,则应添加列 – 使用网格模板列使用6列网格：重复(6,1fr),每个项目跨越两个网格列 – 并将最后一行放在中心位置使用网格列规则 – 请参阅下面的演示：

body {

margin: 0;

}

.grid-container {

display: grid;

grid-template-columns: repeat(6, 1fr);

grid-gap: 20px;

}

.grid-item {

padding: 10px;

background: skyblue;

grid-column: span 2;

}

.grid-item:nth-last-child(2) {

grid-column: 2 / 4;

}

.grid-item:last-child {

grid-column: 4 / 6;

}

1

2

3

4

5

Flexbox解决方案

对于这种布局,flexbox更适合 – 通常我会使用flex-basis(使用calc来创建网格间隙)的flexbox,如下所示：

body {

margin: 0;

}

.grid-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.grid-item {

padding: 10px;

background: skyblue;

margin: 10px;

flex-basis: calc(33.33% - 40px);

}

1

2

3

4

5