F flexr.dev

Layout Recipe

Build an Image Gallery Grid with Tailwind CSS

A gallery wants uniform cells and tight, even gutters — exactly what 'grid grid-cols-4 gap-4' produces. Images flow into equal-width cells automatically, and adding 'aspect-square object-cover' to each image keeps every thumbnail cropped to the same shape. Scale the column count down at smaller breakpoints ('grid-cols-2 md:grid-cols-4') so thumbnails never get too small to tap.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

A four-column gallery with uniform tiles

grid grid-cols-4 gap-4 lays photos into four equal columns with tight, even gutters. Add aspect-square object-cover to each image so every thumbnail is cropped to the same shape no matter its original dimensions.

Tailwind 
<div class="grid grid-cols-4 gap-4">
  <img src="/1.jpg" alt="" class="aspect-square w-full rounded-lg object-cover" />
  <img src="/2.jpg" alt="" class="aspect-square w-full rounded-lg object-cover" />
</div>
Vanilla CSS 
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

Responsive column counts

Four tiny columns are unusable on a phone. Scale the count with breakpoints: grid-cols-2 md:grid-cols-3 lg:grid-cols-4. Thumbnails stay tappable on mobile and dense on desktop.

Tailwind 
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  ...
</div>

Featured tiles that span

Make a hero image dominate the grid with col-span-2 row-span-2. The surrounding thumbnails flow around it automatically. Add grid-flow-dense if you want later small tiles to backfill the gaps a large span leaves behind.

Tailwind 
<img src="/feature.jpg" alt="" class="col-span-2 row-span-2 h-full w-full object-cover" />

Common mistakes

No aspect ratio. Without aspect-square (or a fixed height) tiles come out ragged.

Using object-fill. It distorts photos; object-cover crops cleanly.

Too many columns on mobile. Start at grid-cols-2 so thumbnails stay tappable.

Frequently asked questions

How do I build an image gallery grid in Tailwind?
Use grid grid-cols-4 gap-4 and give each image aspect-square object-cover so all thumbnails share the same shape.
How do I make a gallery responsive?
Use grid-cols-2 on mobile and add md:grid-cols-3 lg:grid-cols-4 so the column count grows on larger screens.
How do I make one gallery image larger than the rest?
Add col-span-2 row-span-2 to that image; the others flow around it, and grid-flow-dense can backfill any gaps.

Popular Layout Guides