Gallery

Gallery is a responsive image grid that lays out <img> tags (or <figure> elements) in a uniform CSS grid. Images inside automatically fill their cells with object-fit: cover.

ExamplesCodeUsageChangelog

Basic gallery

3 columns (default) with 6 placeholder images.

Tailwind v4

<Gallery>
  <img src="https://picsum.photos/seed/1/400/300" alt="..." />
  <img src="https://picsum.photos/seed/2/400/300" alt="..." />
  <img src="https://picsum.photos/seed/3/400/300" alt="..." />
  <img src="https://picsum.photos/seed/4/400/300" alt="..." />
  <img src="https://picsum.photos/seed/5/400/300" alt="..." />
  <img src="https://picsum.photos/seed/6/400/300" alt="..." />
</Gallery>

2 columns

Tailwind v4

<Gallery :cols="2" gap="md">
  <img src="..." alt="..." />
  <img src="..." alt="..." />
  <img src="..." alt="..." />
  <img src="..." alt="..." />
</Gallery>

4 columns

Tailwind v4

<Gallery :cols="4" gap="sm">
  <img src="..." alt="..." />
  <!-- ... -->
</Gallery>

Props

Prop	Type	Default	Description
cols	number	3	Number of grid columns
gap	'none' | 'sm' | 'md' | 'lg'	'sm'	Gap between images (0 / 4px / 8px / 16px)

Slots

Slot	Description
default	<img> or <figure> elements — images are automatically styled to fill each cell