Creating Responsive Masonry UI like Pinterest with TailwindCSS

In this article, I will show you how to create a responsive Masonry UI like Pinterest using just TailwaindCSS. You can check the demo here.

This tutorial will guide you about basic tailwind utility classes by creating the above UI.

Let’s get the layout ready, a basic HTML will look like this!

<div> <!-- container -->
  <img src="https://source.unsplash.com/8n7ipHhI8CI" />
  <img src="https://source.unsplash.com/iEEBWgY_6lA" />
  <img src="https://source.unsplash.com/xOBpdqH2Uao" />
  <img src="https://source.unsplash.com/ZBquC1f8SJ0" />
  <!-- more images -->
</div>

Pretty basic HTML layout, every item inside the container is an image.

Right now all the images are like blocks, like a single column. Let’s start with two columns.

We will use Multi-Column CSSto achieve our layout requirements. You can read the docs for more information.

<div class="columns-1 sm:columns-2"> <!-- container -->
  <img src="https://source.unsplash.com/8n7ipHhI8CI" />
  <img src="https://source.unsplash.com/iEEBWgY_6lA" />
  <img src="https://source.unsplash.com/xOBpdqH2Uao" />
  <img src="https://source.unsplash.com/ZBquC1f8SJ0" />
  <!-- more images -->
</div>

We added 2 TailwindCSS classes to our container:-

• columns-1: Tailwind is a mobile-first responsive framework, so columns-1 gives us a single-column layout starting with anything less than 640px in width.
• sm:columns-2:- This gives us a two-column layout where the width lies between 640px and 768px.
• Cool, we are getting there slowly, let’s add all the columns needed for different breakpoints.

<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4"> <!-- container -->
  <img src="https://source.unsplash.com/8n7ipHhI8CI" />
  <img src="https://source.unsplash.com/iEEBWgY_6lA" />
  <img src="https://source.unsplash.com/xOBpdqH2Uao" />
  <img src="https://source.unsplash.com/ZBquC1f8SJ0" />
  <!-- more images -->
</div>

We added 2 more breakpoints for md where we will have 3-columns and lg 4-columns. md a breakpoint is anything between 768px and 1024px while lg is 1024px and 1280px. We will stop at 4 columns no matter how wider the window becomes.

The images are too close to each other, let’s add some paddings and gaps to our container.

<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4 p-4"> <!-- container -->
  <img src="https://source.unsplash.com/8n7ipHhI8CI" />
  <img src="https://source.unsplash.com/iEEBWgY_6lA" />
  <img src="https://source.unsplash.com/xOBpdqH2Uao" />
  <img src="https://source.unsplash.com/ZBquC1f8SJ0" />
  <!-- more images -->
</div>

We added 3 TailwindCSS classes to give some breathing room to our layout:-

• gap-4:- The gap- modifier defines the gap among the columns in rem units, 4 units make one complete rem in Tailwind’s calculations, similarly gap-2 would have been 0.5rem.
• p-4 :- The p- modifier defines the padding inside the container in all directions, top, left, right and bottom. There are horizontal and vertical counterparts as well, which go like px- and py- respectively. Also, 4 units here give us 1rem padding.
• space-y-4:- Adds 4 units of margin-top to all the children of the container except the first one. This I found the handiest utility to provide spacing among the children.
• Almost done, but let’s add some rounded corners to our images, too many edges are not good for the eyes. 👀

<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4 p-4"> <!-- container -->
  <img class="rounded-md" src="https://source.unsplash.com/8n7ipHhI8CI" />
  <img class="rounded-md" src="https://source.unsplash.com/iEEBWgY_6lA" />
  <img class="rounded-md" src="https://source.unsplash.com/xOBpdqH2Uao" />
  <img class="rounded-md" src="https://source.unsplash.com/ZBquC1f8SJ0" />
  <!-- more images -->
</div>

Great, our masonry layout is complete here, if you want to follow how the whole image information is displayed by hovering over the image please follow the Part-2 of the tutorial. ❤️