CSS网格可重复布局

Question

我只是想知道，是否可以以其他方式（浮动，弯曲等）进行操作？我希望在div数量未知的情况下可重复使用。

.container {
  font-size: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}

.container div {
  background: blue;
}

.container div:nth-child(12n+1),
.container div:nth-child(12n+10) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
  background: red;
}

.container div:nth-child(12n+4),
.container div:nth-child(12n+5) {
  grid-column: auto /span 2;
  grid-row: auto /span 1;
  background: green;
}

.container div:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.container div:nth-child(12n+4):after,
.container div:nth-child(12n+5):after {
  padding-bottom: 50%;
}

<div class="container">
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div> 
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div> 
</div>

我只是想知道，是否可以以其他方式（浮动，弯曲等）进行操作？我希望在div数量未知的情况下可重复使用。