Column layouts or masonry layouts allows you to align images and content in a grid view without additional whitespace. This layout used to be painful to implement in previous versions of CSS; however, thanks to grid columns this is now a breeze to accomplish 👏
In this tutorial I'll show you how to create a simple masonry view with the TailwindCSS column classes.
Grid view without columns
It may be helpful to see what a layout design looks like without column/masonry view. Take a look at the codepen below.
As you can see there is a lot of unnecessary whitespace in this layout because the largest element height will cause that row to include the same height horizontally. This is definitely not a desired result. Let's see how we can resolve this with a few Tailwind classes 👇
Grid view with columns
If we want our layout elements to collapse and remove additional white-space we can easily accomplish this by replacing the classes grid grid-cols-3 with columns-3. Simple as that!
Take a look at the new layout with these column classes 🤙
Quick note: we've also added the class
space-y-5in the container above so that way each of the items have space between each other vertically.
Conclusion
Displaying content in a column or masonry view is super easy by utilizing the TailwindCSS column classes. You may also be interested in checking out the TailwindCSS Break Inside classes to learn how to specify column breaks.