A masonry layout looks a bit like a brick wall. Have you ever scrolled through Pinterest and noticed how their posts are arranged in a beautiful grid where every box has a different height but still fits perfectly?
That’s called a masonry layout — and the best part is, you can make it yourself using just CSS, no JavaScript at all!

Let’s go step by step and learn how to build this layout in the simplest way possible.

By the end you’ll have a lightweight, SEO-friendly gallery that looks great on phones and desktops. Ready to build it together?

This style is perfect for:

• Image galleries
• Blog or article cards
• Portfolios
• Product listings
• Pinterest-style feeds

Now let’s actually build one together according to below give demo

CSS-Only Masonry Layout Demo

HTML Structure

We’ll start by creating a few boxes inside a container.
Each box will represent one “tile” in our masonry wall.

<section class="masonry">
  <div class="item">🌿 Beautiful Nature</div>
  <div class="item">☕ Cozy Morning</div>
  <div class="item">🚴‍♂️ Outdoor Adventure</div>
  <div class="item">🎨 Creative Design</div>
  <div class="item">🏖️ Summer Vacation</div>
  <div class="item">📸 Photography Inspiration</div>
  <div class="item">🎶 Music & Mood</div>
  <div class="item">💻 Web Development</div>
  <div class="item">🍕 Food & Fun</div>
  <div class="item">📚 Learning Everyday</div>
  <div class="item">🌇 City Lights</div>
  <div class="item">🏞️ Mountain View</div>
</section>

That’s all the HTML you need — simple, No 🙂 ?

Lets play with with CSS Magic

Now let’s style it and create the actual masonry layout.
Here’s the full CSS you can use:

/* The Masonry Container */
.masonry {
  column-count: 3;        /* number of columns */
  column-gap: 1.5rem;     /* space between columns */
  max-width: 1100px;
  margin: 0 auto;
}

/* Each Item */
.item {
  background: linear-gradient(135deg, #4CAF50, #2196F3);
  color: white;
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.1rem;
  line-height: 1.5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Random heights to create real masonry effect */
.item:nth-child(3n) { height: 150px; }
.item:nth-child(4n) { height: 200px; }
.item:nth-child(5n) { height: 250px; }

/* Make it responsive */
@media (max-width: 900px) {
  .masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .masonry { column-count: 1; }
}

Let me explain here how It Works

Let’s break down what’s going on here so it will be more clear:

The Container

.masonry {
  column-count: 3;
  column-gap: 1.5rem;
}

This tells the browser to split the content into three columns.
Everything inside flows vertically down the first column, then continues into the next — automatically creating that stacked look.

The Items

.item {
  display: inline-block;
  width: 100%;
}

Each .item behaves like a mini block that fits perfectly into the columns.
We also gave them a gradient, rounded corners, and shadows to make it look good and cleaner.

The Heights

.item:nth-child(3n) { height: 150px; }
.item:nth-child(4n) { height: 200px; }
.item:nth-child(5n) { height: 250px; }

These lines randomly change the height of some boxes — that’s what creates the real “masonry” feel.

Making It Responsive

/* Responsive */
  @media (max-width: 900px) {
    .masonry {
      column-count: 2;
    }
  }
  @media (max-width: 600px) {
    .masonry {
      column-count: 1;
    }
  }

The media queries make sure your layout adapts on smaller screens.
On tablets, it becomes two columns, and on mobile just one column which looks nice and clean.

View the Result

When you open this file in your browser, you’ll see a beautiful wall of cards arranged like this

• Automatically stacked
• Responsive on all devices
• No JavaScript at all

This is how we can create masonry layout using pure CSS — no libraries, no scripts. It’s fully responsive, lightweight and fast to load. You can easily adjust the number of columns or styles.

If you’re a beginner, this is one of the easiest ways to create a professional, modern-looking layout that feels dynamic and natural.

So what you think? Creating a masonry layout with CSS only is much simpler than it looks.
All it takes is a few smart CSS properties like column-count and column-gap.

Now you can use this technique to design image galleries, product grids, blog layouts, and more — all without writing a single line of JavaScript.

Here is complete working code, you just copy and paste code and try on your end 🙂

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Only Masonry Layout Demo</title>
<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f4f4f4;
    padding: 40px;
  }

  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }

  /* Masonry Container */
  .masonry {
    column-count: 3;        /* Number of columns */
    column-gap: 1.5rem;     /* Space between columns */
    max-width: 1100px;
    margin: 0 auto;
  }

  /* Masonry Item */
  .item {
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: #fff;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  /* Add some random height for masonry effect */
  .item:nth-child(3n) {
    height: 150px;
  }
  .item:nth-child(4n) {
    height: 200px;
  }
  .item:nth-child(5n) {
    height: 250px;
  }

  /* Responsive */
  @media (max-width: 900px) {
    .masonry {
      column-count: 2;
    }
  }
  @media (max-width: 600px) {
    .masonry {
      column-count: 1;
    }
  }
</style>
</head>
<body>

<h1>CSS-Only Masonry Layout Demo</h1>

<section class="masonry">
  <div class="item">🌿 Beautiful Nature</div>
  <div class="item">☕ Cozy Morning</div>
  <div class="item">🚴‍♂️ Outdoor Adventure</div>
  <div class="item">🎨 Creative Design</div>
  <div class="item">🏖️ Summer Vacation</div>
  <div class="item">📸 Photography Inspiration</div>
  <div class="item">🎶 Music & Mood</div>
  <div class="item">💻 Web Development</div>
  <div class="item">🍕 Food & Fun</div>
  <div class="item">📚 Learning Everyday</div>
  <div class="item">🌇 City Lights</div>
  <div class="item">🏞️ Mountain View</div>
</section>

</body>
</html>