How to make a simple masonry grid with Tailwind

I have been a fan of the masonry grid for displaying photos on the web for a long time. Historically, making a masonry grid required using a 3rd party JS package to get the desired effect. Luckily Tailwind makes this super easy.

If you aren't familiar, a masonry grid is the same layout as what Pinterest uses. It is a staggered layout of content (typically photos but could be layout cards or anything really.

The way that I make a masonry grid is by using the columns functionality built into tailwind. It basically does everything for you but there's a few configuration items to talk about that can make things look a bit better.

Here's an example of a container that you might use

    <div class="container mx-auto mt-8">
  <div class="gap-4 columns-2 md:columns-3">
  // put your content here like images
  </div>
</div>

The above code would make a two column grid on mobile devices and 3 columns on anything larger than a phone. You can adjust the number of columns based on what you need. The main consideration here is what kind of content you are displaying. I want my photos to be nice and big, but also not force the user to scroll forever on mobile to get to the next content section so I keep it at two columns minimum.

Play around with the number of columns and gap between items to ultimately get your desired effect. Hopefully this post will help someone else googling around for the kind of layout!