我如何使用 css 或 javascript 定位具有动态数量的图片上的块

Question

我想用 css 或 javascript 像图片一样定位我的积木。一行最多四个块，其他对齐如图所示。我需要什么来实现这个。

我试过用flex定位，但是flex还没有column-gap。另外 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>

我需要适用于不同数量的解决方案，但现在我只有静态

Answer 1

对于 justify-content: center，你必须给它一个边距，这样它们就不会相互粘连。它可以实现，但我不知道你是否愿意。查看我的代码片段以了解我在说什么。

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

li {
  width: 20%;
  height: 50px;
  background: grey;
  border-radius: 10px;
  margin: 10px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我如何使用 css 或 javascript 定位具有动态数量的图片上的块

How i can positionate blocks like on picture with dynamic quantity with css or javascript

html

javascript

css

grid-layout