Flexbox layout query

[md44]

Hi all,

I’ve been trying to achieve a certain layout with Flexbox, but it’s looking like it isn’t possible without the addition of wrapper div elements for each ‘column’.

What I would like to do is get box 4 (black) from the following example, to appear under box 2 and 3 (red and yellow): https://codepen.io/anon/pen/MxgVqx

Just wanted to ask here before I give in and have to add some wrapper divs.

Thanks

[Paulie_D]

I can’t get your Codepen to load properly..it keeps resetting. If you can resolve that we can take a look at the code.

However, this sounds like a classic “masonry” issue and flexbox is not suited to that layout.

[md44]

HI @Paulie_D,

Thanks for getting back to me, I’ve saved this pen to my user account, are you still having the same issue: https://codepen.io/mikedentz/pen/wOwxYm

Here’s a screenshot just incase, which shows the layout I’m referring to (all boxes are on the same level): https://i.imgur.com/eszTman.png

I didn’t recognise this as a typical masonry layout, but that possibly could be the case.

[Paulie_D]

Unfortunately, this is a classic “masonry” issue. Once wrapping occurs, it wraps to a NEW ROW not the available space on the current row.

There really is no CSS layout method that will wrap dynamically like you appear to require. Css-Grid can get close but it requires some massaging and is not really dynamic.

https://stackoverflow.com/questions/44377343/css-only-masonry-layout

[md44]

Hi @Paulie_D,

Thanks for the prompt response.

I’m going to have to use container divs and hope the backend developer I’m working with can accommodate them. The Css-Grid solution looked very verbose and it’s something I don’t have experience with at present.

Appreciate the help!

[LearnTheNew]

Hi, @md44 have you got the solution are need any help? – @LearnTheNew

[Author]

Posts