# dsui Image Gallery: Fan, Grid, and Strip Layouts

The dsui image gallery shows several pictures as one bundle and opens them larger on click. You can switch between three layouts yourself: fan, grid, and strip.

- Language: en
- Published: 2026-11-02
- Tags: design-system, image-gallery, dsui
- URL: https://devs7ud.io/en/playground/image-gallery-layouts-en
- Translation (ko): https://devs7ud.io/playground/image-gallery-layouts.md

## The image gallery, three layouts

The dsui image gallery is a component that shows several pictures as one bundle. A click opens them larger on a dimmed background, and the layout is one of three.

## Three layouts

`grid` tiles up to four pictures and counts the rest on the last tile as `+N`. `strip` is a row that scrolls sideways. `fan` spreads overlapping tilted cards, and pointing at one pushes its neighbours away. Cards that do not fit sit behind `+N`.

## Opening it larger

A click opens the pictures larger on a dimmed background, and you page with the arrow buttons, the left and right arrow keys, or a swipe. Each picture shows its caption and source. Esc, the close button, or a click outside closes it, and focus goes back to the tile. With a mouse over the dimmed area, the cursor turns into a round close button.

| Layout | What you see | Extra pictures |
| --- | --- | --- |
| grid | Up to four tiles | \+N on the last tile |
| strip | A row that scrolls sideways | They continue in the row |
| fan | Overlapping tilted cards | They sit behind +N |

_Source: the dsui image gallery component notes_

## Switch it yourself

Change the layout in the control panel, and click a picture to open it larger.

[Live demo: image-gallery](https://dsui.vercel.app/en/items/image-gallery)

## View

With several pictures, the first question is how many to show at a glance. A fan suits the middle of a post, and a grid suits places where comparison matters.