Creating Responsive Masonry UI like Pinterest with TailwindCSS
Tags: tailwindcss, css, gridlayout
Published: 2023-02-19 12:20:48

In this article, I will show you how to create a responsive Masonry UI like Pinterest using just TailwaindCSS. You can check the [demo](https://play.tailwindcss.com/RrFjFysQsq) 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!

```html
<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.

```html
<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.

```html
<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.

```html
<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>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1kjngbu2mm0zsco55ib.png)




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. 👀

```html
<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>
```

![Uploading image](...)


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. ❤️