tailwind

Tailwind Responsive Grid Patterns

Common responsive grid layouts using Tailwind CSS for cards, galleries, and dashboards.

#grid #responsive #layouts

Ready-to-use responsive grid patterns for common layouts.

Auto-Fit Cards Grid

Cards that automatically adjust based on container width:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white p-6 rounded-xl shadow">Card 1</div>
  <div class="bg-white p-6 rounded-xl shadow">Card 2</div>
  <div class="bg-white p-6 rounded-xl shadow">Card 3</div>
  <div class="bg-white p-6 rounded-xl shadow">Card 4</div>
</div>

CSS Grid Auto-Fill (Minimum Width)

<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))">
  <!-- Cards auto-wrap at 280px minimum -->
</div>

<!-- Or with Tailwind config: -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
  <!-- ... -->
</div>

Dashboard Layout

Sidebar + main content:

<div class="grid grid-cols-1 lg:grid-cols-[280px_1fr] min-h-screen">
  <aside class="bg-gray-900 p-6">Sidebar</aside>
  <main class="p-6">Content</main>
</div>

Blog Layout (Content + Sidebar)

<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 max-w-6xl mx-auto">
  <article class="prose max-w-none">Blog Content</article>
  <aside class="space-y-6">
    <div class="bg-gray-50 p-4 rounded-lg">Widget 1</div>
    <div class="bg-gray-50 p-4 rounded-lg">Widget 2</div>
  </aside>
</div>

Masonry-Like with CSS Columns

<div class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
  <div class="break-inside-avoid bg-white p-4 rounded-lg">Short content</div>
  <div class="break-inside-avoid bg-white p-4 rounded-lg">
    Longer content that spans multiple lines...
  </div>
  <!-- More items... -->
</div>

Feature Grid (Bento Style)

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div class="col-span-2 row-span-2 bg-blue-500 rounded-2xl p-6">
    Featured Item
  </div>
  <div class="bg-gray-100 rounded-2xl p-6">Item 2</div>
  <div class="bg-gray-100 rounded-2xl p-6">Item 3</div>
  <div class="col-span-2 bg-gray-100 rounded-2xl p-6">Item 4</div>
</div>

Holy Grail Layout

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header class="bg-white shadow p-4">Header</header>
  
  <div class="grid grid-cols-1 md:grid-cols-[200px_1fr_200px]">
    <nav class="bg-gray-50 p-4">Left Nav</nav>
    <main class="p-6">Main Content</main>
    <aside class="bg-gray-50 p-4">Right Sidebar</aside>
  </div>
  
  <footer class="bg-gray-900 text-white p-4">Footer</footer>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
  <img class="aspect-square object-cover rounded-lg" src="..." alt="" />
  <img class="aspect-square object-cover rounded-lg" src="..." alt="" />
  <!-- ... -->
</div>

Tips:

  • Use gap-* for consistent spacing
  • Combine with aspect-* for consistent image ratios
  • Use break-inside-avoid for masonry layouts