Advanced flexbox layout related question

[Mooks]

Hi there,

I have written a CodePen example in order to show you what I want to achieve.

http://codepen.io/Mooks/pen/mORJPv?editors=1100

This layout is kinda special, since I declare each rows and column with flexbox. Here, I wonder how I can fit the empty spaces due to different images sizes/screen resolutions, in order to make a grid fully responsive.

Regards.

[Paulie_D]

Simply…no there isn’t…

What you seem to be after is a masonry layout and, in the main, this is handled by Javascript.

That’s not to say you couldn’t use flexbox columns (not rows) to achieve the same look but the order would be different.

Here’s the classic Q&A on Stack OVerflow

http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css

On final thing…Flexbox isn’t really intended to be used as a “grid system” strictly.

It has advantages over other layout methods but it still has some limitations.

[Author]

Posts