0

I couldn't find any answer and have no idea if this is even possible. I want to make 2 columns, where the order of the items start in column1, and if a overflow starts, the items are displayed in column2 like this:

column1     column2
item1       item6
item2       item7
item3
item4
item5

The number of items is different everytime, could be 3 items, could be 7, could be 10. They are generated and also every item can have different height.

So i cannot use float, because that destroys order, i cannot use nthchild and position them because of the different heights of the items, in the case that item 5 causes an overflow, it should land in column2.

It has to kinda recognize and measure when the new column is needed.

So just to clarify it again. Say the parent div is 200px in height, and each item is 40px in height. That means 5 items can fit in column1, and the rest goes in column2, but when item3 is 80px, that means item5 doesnt fit anymore, and therefore should be moved to column2.

I hope you understand what im trying to do, and I hope you can help me.

Preferably CSS only, but jQuery is also welcome.

cyborg86pl
  • 2,597
  • 2
  • 26
  • 43
user2461508
  • 113
  • 1
  • 1
  • 6
  • Have you tried css property column-count? It will only split into the number of columns you specify regardless of list of length, but that might be your best bet for a CSS only resolution. With JS, you could add class to the classList that has the property column-count:2 based on if the childNodes length is greater than x. – rguttersohn Jun 09 '20 at 14:57
  • I think none of the answers offered include your requirement of order. You can do it with flex. See example here: https://jsfiddle.net/txyhpfL2/ (adjust the height of your wrapper and the elements in it will overflow to the next column. I would detail the code but I can't provide an answer since your question has been marked as a duplicate. – Will Jun 09 '20 at 15:01

0 Answers0