JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li id="uno">1</li>
<li id="dos">2</li>
<li id="tres">3</li>
<li id="cuatro">4</li>
<li id="cinco">5</li>
<li id="seis">6</li>

</ul>

CSS

li{
    display:inline-block;
    margin:5px;
    width:300px;
    height:200px;
    background:#ccc;
}


#uno{ height:250px;}
#dos{ height:150px;}
#cuatro{height:125px;}

ul{
    width:900px;
    margin:auto;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

@media (max-width: 900px) {
  ul {
       width:600px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
}

@media (max-width: 600px) {
  ul {
      width:300px;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}