2

I have implemented layout calculation with the help of JS, that calculates each column and fills in each column with elements. The basic idea is following:

  • calculate total height of all elements
  • split items into equal columns according to the height of each element (columns count depends on screen width)
  • items order does matter

"equal columns" means not exactly equal but approximately.

JS layout

I know that flexbox can fill in each column until flexbox reaches height limit for column, then flexbox starts filling in next column... But I want "equal columns"...

My question is not about Why is the two p-tags not beside each other when the screen is wide? or Horizontal masonry layout with flexbox CSS only [duplicate], maybe something like How to split a nested navigation into columns with almost equal heights but without JS and without "column fill in limitation".

Is it possible to implement such behavior with flexbox and without JavaScript?

Community
  • 1
  • 1
Alexey Volodko
  • 1,181
  • 1
  • 11
  • 17

0 Answers0