.box{
display:grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px 200px 200px 200px;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.item{
background: #CCC;
text-align: center;
line-height: 200px;
}
.item-1 {
grid-area: 2 / 2 / 4 / 4;
line-height: 400px;
background: #CCC;
text-align: center;
font-size: 50px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b95c7ed26bda7ed0d078ec969dd102a8.png)
.box{
display:grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px 200px 200px 200px;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.item{
background: #CCC;
text-align: center;
line-height: 200px;
}
.item-1 {
grid-area: 2 / 3 / 2 / 5;
line-height: 200px;
background: #CCC;
text-align: center;
font-size: 50px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2f769dce40a128f352c32150ac473e23.png)
.box{
display:grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px 200px 200px 200px;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.item{
background: #CCC;
text-align: center;
font-size: 50px;
}
.item-1 {
grid-area: 1 / 2 / 2 / 3;
background: #CCC;
text-align: center;
font-size: 50px;
}
.item-2{
line-height: 150px;
}
.item-3{
line-height: 200px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c8390bcb82a3dddd2de29226a15aef41.png)