

Next lesson playing in 5 seconds
CancelHow 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.
1.Introduction2 lessons, 05:37
2 lessons, 05:37
1.1Welcome to This Masonry Course01:19
1.1
Welcome to This Masonry Course
01:19
1.2What Is a Masonry Layout?04:18
1.2
What Is a Masonry Layout?
04:18
2.Creating CSS-Only Masonry Layouts3 lessons, 31:01
3 lessons, 31:01
2.1Masonry With Multi-Column Layout09:34
2.1
Masonry With Multi-Column Layout
09:34
2.2Masonry With Flexbox09:43
2.2
Masonry With Flexbox
09:43
2.3Masonry With CSS Grid Layout11:44
2.3
Masonry With CSS Grid Layout
11:44
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value.
Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals.
When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets.
You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.