The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox layout query

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #283623

    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):

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



    I can’t get your Codepen to load 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.


    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:

    Here’s a screenshot just incase, which shows the layout I’m referring to (all boxes are on the same level):

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


    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.


    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!


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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.