Lessons: 5Length: 37 minutes

Next lesson playing in 5 seconds

Cancel

How to Create CSS Masonry Layouts

Welcome to This Masonry Course

01:19

If you’ve ever browsed Pinterest, then you’ll have noticed that the various cards are displayed in a staggered way and don’t align horizontally. This is because the cards are not always the same height. This type of layout is called “masonry” and usually requires a bit of JavaScript to achieve. In this course, we’ll be exploring a few different ways of creating such a layout purely with CSS.