- Overview
- Transcript
1.1 Welcome to This Masonry Course
Hello, and welcome to this Envato Tuts+ course. I’m Adi Purdila, and in this course you’ll learn how to create masonry layouts with CSS.
In a masonry layout, elements of different heights are displayed in a staggered way, just like you can see in this example from Pinterest. And this has actually become a very popular pattern in UI design because it allows us to display elements of different dimensions in a grid format.
Creating a true masonry layout requires a little bit of JavaScript magic as well, but in this course we’ll explore three CSS-only approaches that will get us really close. Here’s what you’ll learn.
In the first lesson, we’ll take a closer look at the characteristics of a true masonry layout and how you can create one with the tools available today. Then, in the second chapter, we’ll explore three ways of creating such a layout without using JavaScript.
Related Links
1.Introduction
1.1Welcome to This Masonry Course01:19
1.2What Is a Masonry Layout?04:18
2.Creating CSS-Only Masonry Layouts
2.1Masonry With Multi-Column Layout09:34
2.2Masonry With Flexbox09:43
2.3Masonry With CSS Grid Layout11:44
1.1 Welcome to This Masonry Course
Hello and welcome to the Envato tuts+ course. I'm Adi Purdila. And in this course you'll learn how to create masonry layouts with CSS. In a masonry layout, elements of different heights are displayed in a staggered way just like you can see In this example from Pinterest. And this has actually become a very popular pattern and UI design because it allows us to display elements of different dimensions in a grid format. Now, creating a true masonry layout requires a little bit of JavaScript magic as well. But in this course, we'll explore three CSS only approaches that will get us really close. So, here's what you'll learn. In the first lesson, we'll take a closer look at the characteristics of a true masonry layout and how you can create one with the tools available today. Then in the second chapter, we'll explore three ways of creating such a layout without using JavaScript. All right, so let's get the ball rolling. We'll start by explaining what a true masonry layout is all about. That's coming up in the next lesson. So I'll see you there.
