0

How to use CSS to split a list of UL with multiple LI into three columns with the same height? Each LI has different heights. The number of LI blocks is always different.

<div class="div_list">
    <ul class="list">
        <li class="list_li">...</li>
        <li class="list_li">...</li>
        <li class="list_li">...</li>
        <li class="list_li">...</li>
        <li class="list_li">...</li>
        <li class="list_li">...</li>
        <li class="list_li">...</li>
    </ul>
</div>

enter image description here

soft87
  • 482
  • 2
  • 16
  • you have: grid, flex, column-count, inline-block or float + width, ... what have you tried that did not work ? ... i'd go for flex.... – G-Cyrillus Sep 30 '17 at 13:24
  • "inline-block or float + width" - give different heights – soft87 Sep 30 '17 at 13:25
  • https://stackoverflow.com/questions/2114757/css-equal-height-columns - not my case – soft87 Sep 30 '17 at 13:40
  • Hey, I just wanted to let you know that I wrote better answer to this question. You can find it [the linked "duplicated" question](https://stackoverflow.com/a/46503334/4530649). That linked question is really old and all answers there don't cover modern way of doing it (which is pretty neat!). For your use-case use `repeat(3, 1fr);` instead. Hope that helps! :) – kamyl Sep 30 '17 at 13:52
  • And I don't think the question should be closed, as use case is quite different. – kamyl Sep 30 '17 at 13:55
  • inline- .. + float give differents height, .. thats why i'd go for flex ... any attempt of CSS you could shared to show where you failed ? https://codepen.io/gc-nomade/pen/EwXBoe – G-Cyrillus Sep 30 '17 at 14:26
  • https://stackoverflow.com/questions/46503445/css-ul-is-divided-into-three-columns – soft87 Sep 30 '17 at 14:39

0 Answers0