我正在尝试使用重复的 2 个垂直部分和 2 个水平部分来制作网格布局。然后2个水平，2个垂直，我们再次重复。
像这样：
.container {
max-width:940px;
margin: 0 auto;
}
.grid-container {
counter-reset: div;
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 186px;
grid-gap:20px;
justify-content:center;
grid-template-areas:
"vert1 vert2 hor1 hor1"
"vert1 vert2 hor2 hor2"
"hor3 hor3 vert3 vert4"
"hor4 hor4 vert3 vert4"
}
.item-a {
grid-area: vert1;
}
.item-b {
grid-area: vert2;
}
.item-c {
grid-area: hor1;
}
.item-d {
grid-area: hor2;
}
.item-e {
grid-area: hor3;
}
.item-f {
grid-area: hor4;
}
.item-g {
grid-area: vert3;
}
.item-h { …