0
0
Tailwindmarkup~5 mins

Masonry-style grid in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A masonry-style grid arranges items in columns with varying heights, like bricks in a wall. It helps show content neatly without big gaps.

Displaying photo galleries where images have different heights.
Showing blog posts or cards with varying content length.
Organizing product listings with different sized descriptions.
Creating Pinterest-like layouts for visual appeal.
Arranging portfolio items with mixed sizes.
Syntax
Tailwind
Use Tailwind CSS classes to create columns and gaps:

<div class="columns-3 gap-4">
  <div class="mb-4">Item 1</div>
  <div class="mb-4">Item 2</div>
  <div class="mb-4">Item 3</div>
  <!-- more items -->
</div>

columns-3 creates 3 columns for the masonry effect.

gap-4 adds space between columns and items.

Examples
This example uses 2 columns and smaller gaps for a compact masonry layout.
Tailwind
<div class="columns-2 gap-3">
  <div class="mb-3">Short item</div>
  <div class="mb-3">A taller item with more content</div>
  <div class="mb-3">Another item</div>
</div>
Here, 4 columns with bigger gaps create a spacious masonry grid.
Tailwind
<div class="columns-4 gap-6">
  <div class="mb-6">Item 1</div>
  <div class="mb-6">Item 2</div>
  <div class="mb-6">Item 3</div>
  <div class="mb-6">Item 4</div>
</div>
Sample Program

This example creates a 3-column masonry grid using Tailwind's columns-3 and gap-4 classes. Each item has different content length to show how the grid stacks them neatly.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Masonry Grid Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
  <main class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Masonry-style Grid with Tailwind</h1>
    <section class="columns-3 gap-4">
      <article class="mb-4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">Item One</h2>
        <p>This is a short description.</p>
      </article>
      <article class="mb-4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">Item Two</h2>
        <p>This item has a longer description to show how the masonry grid stacks items with different heights nicely.</p>
      </article>
      <article class="mb-4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">Item Three</h2>
        <p>Medium length content here.</p>
      </article>
      <article class="mb-4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">Item Four</h2>
        <p>Short content.</p>
      </article>
      <article class="mb-4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">Item Five</h2>
        <p>This is another longer item to demonstrate the masonry effect with varied heights.</p>
      </article>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

The masonry effect uses CSS columns, so items flow vertically in each column.

Use mb-4 or similar margin-bottom classes on items to add vertical spacing.

For accessibility, use semantic elements like <article> and headings inside items.

Summary

Masonry grids arrange items in columns with different heights, like bricks.

Tailwind's columns-{n} and gap-{size} classes create this layout easily.

Use semantic HTML and spacing classes for a neat, accessible design.