![](https://miro.medium.com/v2/resize:fit:700/1*17TKV0gKz7IIuSq3HkqQbA.jpeg)
Member-only story
HOW TO: Pure CSS masonry layouts
Achieving that aesthetically pleasing staggered effect without any JavaScript
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.
![](https://miro.medium.com/v2/resize:fit:700/1*TfCvIdT79TwK8zcCeG-qSQ.png)
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 😇