Photo by Gustavo Belemmi on Unsplash

Member-only story

HOW TO: Pure CSS masonry layouts

Achieving that aesthetically pleasing staggered effect without any JavaScript

Jhey Tompkins
Published in
13 min readJan 21, 2016

One popular content layout style is “masonry”. Not familiar with it? Think Pinterest, Windows’ Metro etc. To describe it in words, an almost crazy paving effect whereby variable sized blocks of content are pieced together in an aesthetically pleasing style, often staggered.

Masonry style layouts aren’t something new. So why look at them now? There are some great solutions out there for getting the masonry effect already aren’t there? This is true. However, can we push a pure CSS solution a little further? Could we leverage Flexbox to achieve a more desired effect and push the capabilities a little further?

For those in camp TL;DR feel free to check out some code I’ve pieced together here(github), the code for this post here or the more polished version here. Alternatively, here’s a demo of the end result 😇

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Jhey Tompkins

I make awesome things for awesome people!

Responses (21)

What are your thoughts?

Vry Nice, Thank you! My main client just gave me the green light to not cater to anything older than IE10, so I can play with the cool toys now.

5

This is great. But do you know if there’s any way to have the boxes flow horizontally instead of vertically?

53

wew… Thanks for your great tutorial. i have a new blog using old masonry child theme based on wordpress twenty thirteen (see http://wpforwhat.com )

15

Recommended from Medium

Lists

See more recommendations