Как я могу позиционировать блоки, как на картинке с динамическим количеством с CSS или JavaScript

Question

Я хочу расположить свои блоки, как на картинке, с помощью CSS или JavaScript. Четыре блока максимально в одной строке, а остальные выровнены, как на картинке. Что мне нужно для этого.

Я пытался позиционировать его с помощью flex, но у flex пока нет пробела в колонке. Также justify-content мне не помогает, потому что в этом случае блоки имеют разные пробелы. Может быть, он может позиционироваться с сеткой, но я знаю, что вы можете жестко кодировать значения в CSS с grid-area или grid-column, но он работает только со статическим количеством.

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>