Помогите настроить columns или подобрать альтернативу

помогите, пожалуйста, не могу решить такую проблему: У меня есть ul список в который динамически записуються li, нужно что бы создавались колонки 4, решил использовать свойство columns, но тогда колонки выставляются так:

1          4          7          10
2          5          8
3          6          9

А нужно так:

1          2          3          4    
5          6          7          8    
9          10                  

При этом все одного размера, что бы если один из элементов списка был больше, то нижние строки списка все равно были на одном уровне, а не гдето выше, а где то ниже... Вот код: HTML:

<div class="menu">
<ul id="menu">
</ul>//куда вставляется контент
<div style="display:none" id="template">
<div class="elements" >
    <li class="#" data-class>
        <a href="#" data-id class="open_modal"><img  src="#" data-url-small title="подробнее" /> </a>
        <h1 data-name-first class="firstName"></h1>
        <p>вес: <span data-weight></span> гр. цена <span data-price></span> грн.</p>
        <button class="buy"><p><i class="fa fa-shopping-cart" aria-hidden="true">&nbsp;&nbsp;&nbsp;</i>Хочу!</p></button>
        <div class="forModal" id="#" data-link style="display:none">
            <div class="forClone">
            <img src="#" data-url-big title="подробнее" />
            <h1 data-name-second></h1>
            <p data-consist></p>
            <button class="buy"><i class="fa fa-shopping-cart" aria-hidden="true">&nbsp;&nbsp;&nbsp;</i>Хочу!</button> 
        </div>
        </div>
    </li>
</div> //заполняемый динамически контент

CSS:

 .menu li {
list-style-type: none; 
width: 90%;
text-align: center;
color: red;
display: inline-block;
vertical-align: top;
}
  .menu ul{
-webkit-columns: 4; 
-moz-columns: 4; 
columns: 4;
}
.menu  img { max-width: 100%; }