需求:使用网格布局实现图中色块布局方式
知识点:网格布局
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
section{
width: 370px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a2"
"a3 a2 a2"
"a4 a4 a5"
"a6 a7 a7"; */
/* 简写方式 */
grid-template:
"a1 a2 a2" 1fr
"a3 a2 a2" 1fr
"a4 a4 a5" 1fr
"a6 a7 a7" 1fr
/1fr 1fr 1fr;
grid-gap: 10px 10px;
padding:10px
}
div:nth-child(1){
grid-area: a1;
background: pink;
}
div:nth-child(2){
grid-area: a2;
background: skyblue;
}
div:nth-child(3){
grid-area: a3;
background: lightcoral;
}
div:nth-child(4){
grid-area: a4;
background: lightseagreen;
}
div:nth-child(5){
grid-area: a5;
background: lightsteelblue;
}
div:nth-child(6){
grid-area: a6;
background: lightyellow;
}
div:nth-child(7){
grid-area: a7;
background: lightcoral;
}