jquery - Wordrepss Ajax Load More unsual grid -

i create unsual grid ajax load more plugin creating ul li blog posts, make row 4 elements row 3 elements 4 , 3 elements rows again , again.

how can that, far in css i've set 25% width li. since it's loading in ajax js script counter dosn't want work.

please help.

something this? make sure correct number of posts go rows.

* {    box-sizing: border-box;  }    ul {    padding: 0;    list-style: none;    margin: 0;  }    .row {    display: flex;    width: 100%;  }    .row:nth-child(odd) {    background: red;  }    .row:nth-child(even) {    background: blue;  }    .post {    height: 50px;    border: thin solid black;  }    .row:nth-child(odd) .post {    width: 25%;  }    .row:nth-child(even) .post {    width: 33%;  }

<div class="container">    <ul class="row">      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>    </ul>    <ul class="row">      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>    </ul>    <ul class="row">      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>    </ul>    <ul class="row">      <li class="post">post</li>      <li class="post">post</li>      <li class="post">post</li>    </ul>  </div>