Masonry-style grid in Tailwind - Mini Project: Build & Apply

Create a Masonry-style Grid with Tailwind CSS

📖 Scenario: You want to display a collection of photos in a neat, masonry-style grid on a webpage. This layout stacks images in columns with varying heights, like a Pinterest board.

🎯 Goal: Build a responsive masonry-style grid using Tailwind CSS that arranges images in columns with gaps, adjusting nicely on different screen sizes.

📋 What You'll Learn

Use Tailwind CSS utility classes only

Create a container with multiple images

Arrange images in a masonry-style grid with 3 columns on desktop

Use gaps between images

Make the grid responsive with fewer columns on smaller screens

💡 Why This Matters

🌍 Real World

Masonry grids are popular for photo galleries, portfolios, and product showcases on websites.

💼 Career

Knowing how to build responsive, visually appealing grids is a key skill for front-end web developers and UI designers.

1

Set up the HTML structure with images

Create a <div> container with the class masonry-grid. Inside it, add exactly 6 <img> tags with these src attributes: photo1.jpg, photo2.jpg, photo3.jpg, photo4.jpg, photo5.jpg, and photo6.jpg. Each image should have an alt attribute describing it as Photo 1, Photo 2, and so on.

Tailwind

Need a hint?

Use a <div> with class masonry-grid and add 6 <img> tags inside with the exact src and alt values.

2

Add Tailwind CSS classes for columns and gap

Add Tailwind CSS classes to the masonry-grid <div> to create a 3-column layout with a gap of 1.5rem between items. Use the classes columns-3 and gap-6.

Tailwind

Need a hint?

Add the classes columns-3 and gap-6 to the masonry-grid <div> to create columns and spacing.

3

Make images responsive and add rounded corners

Add Tailwind CSS classes to each <img> tag to make images take full width of their column and have rounded corners. Use the classes w-full and rounded-lg on each image.

Tailwind

Need a hint?

Add class="w-full rounded-lg" to each <img> tag to make images fill their column width and have smooth corners.

4

Make the grid responsive with fewer columns on small screens

Update the masonry-grid <div> classes to have 1 column on small screens and 2 columns on medium screens. Use the Tailwind responsive classes sm:columns-1 and md:columns-2 along with the existing columns-3 and gap-6.

Tailwind

Need a hint?

Add sm:columns-1 and md:columns-2 classes to the masonry-grid <div> to make the grid adapt on smaller screens.