Horizontal Masonry Layout

[jimleeder123]

I can get a masonry effect on my blog posts on wordpress with a class on the container div with the following class. Individual blog posts are set to 25% width. Code below…

#blogwrap {

display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;

}

However I know that this won’t work in older browsers namely the wonderful IE9 and earlier. Is there are a CSS fallback for this?

I don’t want to go anywhere near JavaScript, CSS only please. Any help greatly appreciated.

[Paulie_D]

Is there are a CSS fallback for this?

Not really…no.

[jimleeder123]

Ok but is it possible to have posts going horizontally instead of vertically in masonry layout?

Setting “flex-flow: row wrap;” puts all posts in correct order but loses the masonry effect!

[Paulie_D]

You’d have to check the masonry docs in what order it lays them out.

[jimleeder123]

Please link me to these docs?

[Paulie_D]

http://masonry.desandro.com/

[jimleeder123]

Just to clarify – I’m not using this plugin, I’m trying to create a masonry like layout using CSS.

Have got it appearing with the style earlier on the container as a flex box, but it shows posts vertically – I want them horizontally.

[Paulie_D]

No.

You can’t do this with CSS….it’s not possible….that’s not the way line boxes are laid out…even with flexbox.

[jimleeder123]

If I set the flex direction to row it lists them horizontally, but the masonry effect goes, and the child divs don’t move up to use the empty space made by shorter child elements above.

Seems both ways have the benefit the other needs, and lack what the other has.

[Paulie_D]

If I set the flex direction to row it lists them horizontally, but the masonry effect goes, and the child divs don’t move up to use the empty space made by shorter child elements above.

This is what I have been trying to tell you.

That’s why the Masonry Js plugin exists …althugh there are others.

[jimleeder123]

Ok well thanks for your time and help anyway.

[Author]

Posts