DEV Community

ankurrsinghal
ankurrsinghal

Posted on

1

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay