Responsive Photo Grid

A fully responsive image grid that automatically adjusts its columns across mobile, tablet, and desktop screens.

This tailwind example is contributed by JUGENDRA GANGWAR, on 17-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Card Image gallery Grid

Author JUGENDRA GANGWAR

Tailwind v3.4 222 3

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 sm:gap-6 p-4 sm:p-6 max-w-7xl mx-auto">
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=600&h=400&fit=crop" alt="Person analyzing code on multiple monitors" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-blue-600 px-2.5 py-1 rounded-full shadow-sm">Engineering</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Scaling APIs Without Losing Sleep</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Practical patterns for handling traffic spikes and keeping latency predictable.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop" alt="Portrait of author Maya Chen" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Maya Chen</span>
        </div>
        <time class="text-xs text-gray-500">Jun 12</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?w=600&h=400&fit=crop" alt="Designer sketching wireframes on paper" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-purple-600 px-2.5 py-1 rounded-full shadow-sm">Design</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">The Case for Boring Interfaces</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Why predictable, familiar UI patterns often outperform clever new ones.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop" alt="Portrait of author Daniel Ortiz" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Daniel Ortiz</span>
        </div>
        <time class="text-xs text-gray-500">Jun 9</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&h=400&fit=crop" alt="Team meeting around a table with laptops" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-emerald-600 px-2.5 py-1 rounded-full shadow-sm">Business</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Running Meetings People Actually Want</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">A short framework for cutting meeting time in half without losing alignment.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop" alt="Portrait of author Priya Nair" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Priya Nair</span>
        </div>
        <time class="text-xs text-gray-500">Jun 5</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600&h=400&fit=crop" alt="Close up of hands writing in a notebook" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-amber-600 px-2.5 py-1 rounded-full shadow-sm">Productivity</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Deep Work in a Notification World</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Small structural changes that protect focus without heroic willpower.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&fit=crop" alt="Portrait of author Tom Bennett" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Tom Bennett</span>
        </div>
        <time class="text-xs text-gray-500">Jun 2</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop" alt="Analytics dashboard displayed on screen" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-rose-600 px-2.5 py-1 rounded-full shadow-sm">Data</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Metrics That Actually Predict Churn</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Most teams track vanity numbers. Here's what to watch instead.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=80&h=80&fit=crop" alt="Portrait of author Sofia Marquez" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Sofia Marquez</span>
        </div>
        <time class="text-xs text-gray-500">May 28</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=600&h=400&fit=crop" alt="Group brainstorming around a whiteboard" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-indigo-600 px-2.5 py-1 rounded-full shadow-sm">Strategy</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Saying No to Almost Everything</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">How constrained roadmaps produce sharper products and happier teams.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=80&h=80&fit=crop" alt="Portrait of author Jordan Lee" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Jordan Lee</span>
        </div>
        <time class="text-xs text-gray-500">May 24</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=400&fit=crop" alt="Remote team on a video call" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-teal-600 px-2.5 py-1 rounded-full shadow-sm">Culture</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Building Trust Across Time Zones</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Async-first habits that keep distributed teams genuinely connected.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop" alt="Portrait of author Aisha Rahman" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Aisha Rahman</span>
        </div>
        <time class="text-xs text-gray-500">May 20</time>
      </div>
    </div>
  </article>
  <article class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="relative overflow-hidden">
      <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=400&fit=crop" alt="Developer reviewing code on a laptop screen" class="w-full h-44 sm:h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
      <span class="absolute top-3 left-3 text-xs font-semibold text-white bg-cyan-600 px-2.5 py-1 rounded-full shadow-sm">Engineering</span>
    </div>
    <div class="p-4 sm:p-5 flex flex-col flex-1">
      <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 leading-snug">Code Review as a Teaching Tool</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Turning pull request comments into moments that build better engineers.</p>
      <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&fit=crop" alt="Portrait of author Marcus Webb" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-sm font-medium text-gray-800">Marcus Webb</span>
        </div>
        <time class="text-xs text-gray-500">May 15</time>
      </div>
    </div>
  </article>
</div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k