.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://img-blog.csdnimg.cn/21dac52e4bd2420b9706312fd971a7b4.png#pic_center)
.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://img-blog.csdnimg.cn/de0aa14038cc41eda74a1d574c49bc8c.png#pic_center)
.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://img-blog.csdnimg.cn/563204241d0647f19957c6c1761096ee.png#pic_center)