我想使用css或javascript在图片上定位块。 一行中最多四个块，其他如图所示。我需要什么来实现这一目标。
我试图用flex定位它，但是flex还没有栏间距。另外justify-content也无济于事，因为这种情况下的情况有不同的差距。也许它可以在网格中定位，但是我知道您只能在具有网格区域或网格列的css中对值进行硬编码，但是它仅适用于静态数量。
ul {
display: grid;
grid-template-columns: repeat(8,55px);
grid-template-rows: 1fr 1fr;
grid-gap: 25px;
list-style: none;
}
li {
width: 100%;
height: 50px;
background: #c4c4c4;
border-radius: 10px;
}
li:nth-child(1) {
grid-column: 1/3
}
li:nth-child(2) {
grid-column: 3/5
}
li:nth-child(3) {
grid-column: 5/7
}
li:nth-child(4) {
grid-column: 7/9
}
li:nth-child(5) {
grid-column: 2/4
}
li:nth-child(6) {
grid-column: 4/6
}
li:nth-child(7) {
grid-column: 6/8
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
我需要适用于不同数量的解决方案，但现在我只适用于静态