grid-template:
"a a b b b b b b b b " 110px
"c c c c c c c c c c" 70px / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
在第二行中，您需要放置 10 个相同的块和图像。如果将每个图像grid-area: с;相互分配，它将重叠。并为每个图像分配一个唯一的区域。这有点贵，所有的块都在一个父级中......
按顺序，块a- 1 块（图像），c- 10 块（图像），b- 简单 div
在第一行中，该块a应占据 20%，其余的是块“b”。在第二行中，您需要排列 10 个图像，使它们均匀地占据整个宽度。
.container {
display: grid;
gap: 10px;
padding:10px;
grid-template:
"a a b b b b b b b b" 170px
"c3 c4 c5 c6 c7 c8 c9 c10 c11 c12" 70px;
}
.b { grid-area: b; }
.a { grid-area: a; }
.c:nth-child(3) {grid-area: c3}
.c:nth-child(4) {grid-area: c4}
.c:nth-child(5) {grid-area: c5}
.c:nth-child(6) {grid-area: c6}
.c:nth-child(7) {grid-area: c7}
.c:nth-child(8) {grid-area: c8}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(11){grid-area: c11}
.c:nth-child(12){grid-area: c12}
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}<div class="container">
<div class="b"></div>
<div class="a"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
