网格布局

其中网格布局的一个实现是由一个css的样式

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

使用此功能来对div进行一个划分

.container > div:nth-last-of-type(3) {
    grid-column: 1 / 3;
}


.container > div:nth-last-of-type(7) {
    grid-column: 3 / 5;
}

.container > div:nth-last-of-type(4) {
    grid-column: 3 / 5;
}

.container > div:nth-last-of-type(12) {
    grid-column: 1 / 3;
}

其中对一个整体div划分之后

对各个模块进行一个div包裹

进行样式的设计

然后效果如下