网格代码

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr); /*三列轨道网格*/
grid-gap: 10px;/*行列间距10像素*/
grid-auto-rows: minmax(100px, auto);/*最小行为100像素,最大为自动*/
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}/*网格1:第1行第1到3列网格区域*/
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}/*网格2:第1到3行第2到4列网格区域*/
.three {
grid-column: 1;
grid-row: 2 / 5;
}/*网格3:第2到5行第1列网格区域网格区域*/
.four {
grid-column: 3;
grid-row: 3;
}/*网格4:第3行第3列单元格*/
.five {
grid-column: 2;
grid-row: 4;
}/*网格5:第4行第2列单元格*/
.six {
grid-column: 3;
grid-row: 4;
}/*网格6:第4行第3列单元格*/

 

posted @ 2018-09-25 11:15  奥哈拉  阅读(417)  评论(0编辑  收藏  举报