Part 25: Responsive Masonry & Auto-Fit / Auto-Fill Grids

Pinterest-style masonry layouts display cards of varying heights without ugly vertical gaps.

1. CSS Columns (Native Masonry)

Tailwind provides columns-* utilities that create multi-column text and card flows:

<div class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
  <div class="break-inside-avoid bg-white p-6 rounded-xl shadow">
    <h4 class="font-bold">Short Card</h4>
    <p class="text-sm text-slate-500 mt-2">A brief summary.</p>
  </div>

  <div class="break-inside-avoid bg-white p-6 rounded-xl shadow">
    <h4 class="font-bold">Tall Card</h4>
    <p class="text-sm text-slate-500 mt-2">
      This card has extensive content with multiple paragraphs that flows naturally without breaking across column breaks.
    </p>
  </div>

  <div class="break-inside-avoid bg-white p-6 rounded-xl shadow">
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=300" class="rounded-lg mb-3" />
    <h4 class="font-bold">Photo Card</h4>
  </div>
</div>

Crucial Tip: Always add break-inside-avoid to child cards to prevent them from splitting across column boundaries!

Key Takeaways

• Use columns-1 md:columns-3 with break-inside-avoid to build lightweight masonry layouts without external JavaScript plugins.

In Part 26, we build a Complete E-Commerce Product Grid & Dashboard!