团队项目冲刺第七天
网格布局
其中网格布局的一个实现是由一个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包裹
进行样式的设计
然后效果如下