.wrapper { /*wrapper包装*/
display: grid; /*定义网格*/
grid-template-columns: repeat(3, 1fr); /*设置为三行*/
grid-gap: 10px; /*设置网格间距为10px*/
grid-auto-rows: minmax(100px, auto); /*设置行宽度为100px*/
}
.one {
grid-column: 1 / 3; /*令one这个selector从线编号为1到3 行宽度为1 */
grid-row: 1;
}
.two {
grid-column: 2 / 4; /*令two这个selector从线编号为2到4 行宽度为1到3*/
grid-row: 1 / 3;
}
.three {
grid-column: 1; /*令three这个selector从线编号为1 行宽度为2到5*/
grid-row: 2 / 5;
}
.four {
grid-column: 3; /*令four这个selector从线编号为3 行宽度为3*/
grid-row: 3;
}
.five {
grid-column: 2; /*令five这个selector从线编号为2 行宽度为4*/
grid-row: 4;
}
.six {
grid-column: 3; /*令six这个selector从线编号为3 行宽度为4*/
grid-row: 4;
}
html:5+tab
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
3st WEEK BLOG：grid用法
猜你喜欢
转载自blog.csdn.net/AMark_BRO/article/details/82966687
今日推荐
周排行