Estimated reading: 4 minutes 55 views

🧱 Bootstrap 5 Masonry Layout – Create Pinterest-Style Responsive Grids

🧲 Introduction – What Is a Masonry Layout in Bootstrap 5?

A masonry layout arranges items like bricks in a wall—positioned vertically with minimal gaps, often used for photo galleries, cards, blog grids, or portfolios. In Bootstrap 5, this effect is achieved with CSS columns or optional JavaScript libraries like Masonry.js.

🎯 In this guide, you’ll learn:

How to implement a masonry-style layout using CSS columns
Customize item widths and responsive stacking
Use Bootstrap cards or custom content inside masonry blocks
Add gutters and mobile-friendly behavior

✅ Example 1 – Pure CSS Masonry with Bootstrap Cards

<div class="container py-5">
  <div class="row">
    <div class="col-12">
      <div class="masonry-columns">
        <div class="masonry-item card mb-3">
          <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="...">
          <div class="card-body">
            <p class="card-text">Card with image and short text.</p>
          </div>
        </div>
        <div class="masonry-item card mb-3">
          <div class="card-body">
            <h5 class="card-title">Text-Only Card</h5>
            <p class="card-text">Some more content in this one.</p>
          </div>
        </div>
        <div class="masonry-item card mb-3">
          <img src="https://via.placeholder.com/300x400" class="card-img-top" alt="...">
        </div>
        <!-- Repeat for more cards -->
      </div>
    </div>
  </div>
</div>

<style>
  .masonry-columns {
    column-count: 3;
    column-gap: 1.5rem;
  }

  .masonry-item {
    break-inside: avoid;
  }

  @media (max-width: 768px) {
    .masonry-columns {
      column-count: 2;
    }
  }

  @media (max-width: 576px) {
    .masonry-columns {
      column-count: 1;
    }
  }
</style>

Feature/Class	Purpose
`column-count`	Defines how many vertical columns to display
`break-inside: avoid`	Prevents card splitting across columns
`.card`, `.mb-3`	Standard Bootstrap card layout and spacing

📌 Works natively with modern browsers using CSS3 columns—no JS needed!

✅ Example 2 – Masonry Layout Using Masonry.js (Optional)

<!-- HTML -->
<div class="container py-5">
  <div class="row" id="masonry-grid">
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <img src="https://via.placeholder.com/300x240" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Item One</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body">
          <p class="card-text">Text only card</p>
        </div>
      </div>
    </div>
    <!-- More columns -->
  </div>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
  var grid = document.querySelector('#masonry-grid');
  var masonry = new Masonry(grid, {
    itemSelector: '.col-sm-6',
    gutter: 16
  });
</script>

Tool/Lib	Description
Masonry.js	External JS library for fluid masonry grid
`.col-sm-6`	Bootstrap grid item width classes
`gutter` option	Controls spacing between elements

📌 Recommended if you need fine control or IE11 support (not CSS columns).

📘 Masonry Layout Utilities Reference

Feature	Utility/Class	Description
Layout Method	`column-count`, `break-inside`	CSS-only masonry behavior
Bootstrap Cards	`.card`, `.card-body`, `.mb-*`	Used for content layout
Responsive Grid	`.col-*`, `.row`	Useful when using JS-powered Masonry
Optional JS	Masonry.js	Advanced masonry support and fallbacks

🛠️ Best Practices for Masonry Layouts

Tip	Why It Helps
Use CSS columns for lightweight needs	No dependency on external JS
Apply `break-inside: avoid` to children	Prevents content from splitting mid-way
Adjust `column-count` with media queries	Ensures mobile responsiveness
Use JS-based Masonry only if needed	Better performance and cleaner markup
Always wrap `.card` with spacing	Avoids overlapping or cramped elements

📌 Summary – Recap & Next Steps

Bootstrap 5 lets you implement masonry-style layouts using modern CSS columns or Masonry.js for more dynamic behavior. It’s a flexible way to create Pinterest-style UIs using cards or images.

🔍 Key Takeaways:

Use column-count and break-inside: avoid for CSS-only masonry
Optional: integrate Masonry.js for complex layout needs
Responsive and content-aware layout with minimal effort
Combine with cards, lists, and media elements for gallery UIs

⚙️ Ideal for photo portfolios, news grids, product showcases, and Pinterest-style content blocks.

❓ FAQs – Bootstrap 5 Masonry Layout

❓ Is Masonry.js included in Bootstrap 5?
✅ No. You must include it manually via CDN or NPM if needed.

❓ Can I build masonry without JavaScript?
✅ Yes. Use CSS column-count with break-inside: avoid for native behavior.

❓ How do I make masonry responsive?
✅ Change column-count via media queries or use Bootstrap grid with Masonry.js.

❓ Which is better – CSS columns or Masonry.js?
✅ CSS columns are simpler and lightweight. Use Masonry.js only when needed for precise positioning or compatibility.

« Previous Next »

Share Now :