How to Create CSS Masonry Layouts

1.2 What Is a Masonry Layout?

Welcome to the first lesson of this course where you learn what a true Masonry layout is all about. And how you can create one with the tools available today. So let's get started. A Masonry is a column-based grid layout that doesn't have fixed height rows. In other words, each element has a different height and any unnecessary gaps are eliminated. Now in terms of UI design, a layout like this has three very important technical requirements. Number one, the elements inside have different heights. The width stays the same, but the height will vary from element to element. Number two, the elements or grid items are displayed in the correct order from left to right regardless of how many columns we have. As you can see in this example, we can read the grid from left to right. Starting with elements 1, 2, 3, 4 on the first row, and then 5, 6,7, and so on, on the next row. And this is actually where most Masonry layouts fall short because they will order the grid items in columns instead of rows. As you can see in this example, the first column contains items 1, 2, and 3. The second, 4, 5, and 6, and so on. Now, while this isn't such a big deal in some situations, this type of layout is not exactly true Masonry. Finally, requirement number three, the columns are contained and their numbers defined. Ideally, we want to be able to define how many columns we want to use, and also contain those columns so they don't overflow outside of the viewport. Now, to create such a layout, you would most likely go for a JavaScript solution. Because this is by far the easiest method. Because it requires you to write the least amount of code. Currently there are a couple of JavaScript plugins that you can use for this. I'm gonna mention Masonry here. Masonry JS and Isotope. These are two of the most popular ones. But as I was saying there are a couple more. A simple Google search for Masonry layout or Masonry JavaScript will give you some other results as well. Now the thing with these JavaScript power solutions is that they will use absolute positioning on all of the grid elements. So they can be placed in a Masonry format without any gaps. And if that's something that you're willing to accept, then great. Go ahead and do that. Now, if you don't wanna use JavaScript to create a true Masonry layout, then I'm afraid you're out of luck. Because doing this with pure CSS is not possible at the time of this recording. However, if you're willing to make some compromises, then you can create some CSS-only layouts that are really close or that are very close to the real thing. And by compromises I mean not meeting all three requirements that I mentioned earlier. So in the next chapter, I'm gonna show you three methods for creating CSS-only masonry layouts. That will get us very close to a true Masonry layout. And we'll discuss pros and cons for for each one. The very first layout will be created by using multi-column or CSS multi-column layout. That's coming up in the next lesson, so I'll see you there.