砌体安排剪出李盒子

Question

我正在做这种砌体布置，问题是它切出了底部的盒子，并在顶部放置了底部的一半。

我只想要基本的砌体布置

/* Box-sizing reset: https://w3bits.com/?p=3225 */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
ul,li{list-style:none;}
/* The Masonry Container */
.masonry {
  margin: 1.5em auto;
  
  column-gap: 1.5em;
}

/* The Masonry Brick */
.masonry li {
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
}

/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}
ul li:nth-child(5n+1){
	background:#ff45ff;
}
ul li:nth-child(5n+2){
	background:#DBFF33;
}ul li:nth-child(5n+3){
	background:#FFBD33;
}
ul li:nth-child(5n+4){
	background:#33FF57;;
}ul li:nth-child(5n+5){
	background:#00FFFF;
}

<ul class="masonry">
<li class="" style='height:400px'>box1</li>
<li class="" style='height:320px'>box2</li>
<li class="" style='height:210px'>box3</li>
<li class="" style='height:340px'>box4</li>
<li class="" style='height:430px'>box5</li>
<li class="" style='height:410px'>box6</li>
<li class="" style='height:280px'>box7</li>
<li class="" style='height:240px'>box8</li>
<li class="" style='height:290px'>box9</li>
<li class="" style='height:760px'>box10</li>
<li class="" style='height:400px'>box11</li>
<li class="" style='height:400px'>box12</li>
<li class="" style='height:440px'>box13</li>
<li class="" style='height:400px'>box15</li>
<li class="" style='height:400px'>box18</li>
<li class="" style='height:400px'>box19</li>
<li class="" style='height:210px'>box20</li>
<li class="" style='height:340px'>box21</li>
<li class="" style='height:430px'>box22</li>
<li class="" style='height:410px'>box23</li>

</ul>

在基本CSS中，我认为这是不可能的。

我已经尝试了上面的代码

如何解决此错误？ 是否需要使用javascript来解决此问题？