Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Gallery

The gallery component can be used to show multiple images inside a masonry grid layout styles with the utility-first classes from Tailwind CSS to show a collection of pictures to your users based on various layouts, styles, sizes, and colors. This component is recommended for usage within marketing UI interfaces and website sections when you want to show pictures of your team members, office pictures, or even case study images.

Default gallery

Use this component to show a collection of images inside a gallery. Number of rows in the gallery is set by passing the `grid-cols-n` Tailwind class (including the reactive prefix). Spacing between images is set by `gap-n` class. If you don't set them it behaves like `grid-cols-1` and `gap:inherit`. Example below show a gallery with three pictures on a row.
erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag

Masonry grid

This example can be used to show the images inside a masongry grid layouts with four columns.
erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag

Featured image

This example can be used to feature the most important image and show a row of five pictures below.
erbology
shoes
small bag
plants
watch
shoe

Quad gallery

Use this example to show four larger images with two items on a row.
shoes
small bag
plants
watch

Gallery with tag filters

Use this example to show a list of tags and filter the images below based on the activately selected tag.
erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag

Heterogeneous gallery

Gallery items don't have to be all the same but then you need to list them manually - don't set the `items` property.
shoas
Sale
Sale
plants

Custom image rendering

This example shows how to get a complete control over the gallery images look and feel.
shoes
small bag
plants
watch
shoe