Добрый день, коллеги!
Возможно решение простое, но пока в голову оно не приходит.
Есть список, который может быть в две, три или четыре колонки, реализован с помощью флексбокс модели.
Допустим список в три колонки, берем первый ряд по горизонтали, в первом и последнем элементе контента на одну строку, а в среднем например на три, соответственно второй ряд по горизонтали будет отталкиваться от самого высокого элемента.
Но нужно чтоб нижний отступ у невысоких элементов не зависел от высоты соседа и элементы шли друг за другом.
ul.grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
ul li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0.2rem 0;
}
ul li:before {
content: "\25CF";
margin: 0.1rem 10px 0 20px;
font-size: 0.75rem;
}
ul.grid li {
padding: 0.2rem 1rem;
}
ul.grid.three-columns li {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3%;
-ms-flex: 0 0 33.3%;
flex: 0 0 33.3%;
}
ul.grid.three-columns li:nth-child(3n+1) {
padding-left: 0;
}
ul.grid.three-columns li:nth-child(3n) {
padding-right: 0;
}
<ul class="grid three-columns">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit amerem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit.</li>
</ul>