Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Container Query Columns Gallery Block for React Aria

A resizable split, copy and a framed wall of twelve square swatches: drag the divider to change the wall's width and container queries turn two columns into up to five, with a live readout.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A container-query demo for React with React Aria. On lg the block is one resizable split: copy at the start, a framed wall of twelve square swatches (checks, stripes, dots and weaves) at the end, and the divider is the control. Drag it, or focus it and press the arrow keys, and the wall's width changes; @container queries (not the window) change two columns into three, four or five. A badge reads "4 columns, 696 px", measured with a ResizeObserver on the wall itself, and a polite line announces the column count. The wall keeps its height and scrolls inside its frame when the rows run longer. Below lg the divider goes and the wall's own width still picks the columns. The swatches are drawn in the theme's greys. It's built from Resizable, Badge and Guides. For layout lessons, design-system docs and any gallery that lives in a resizable pane.

FAQ

What changes the column count?

The grid has grid-cols-2 @sm:grid-cols-3 @xl:grid-cols-4 @3xl:grid-cols-5 inside a container-type element, so it follows the wall's width: 384, 576 and 768 pixels. The readout mirrors those numbers as a list at module scope; keep the two in step if you change either.

How do I resize it with the keyboard?

The divider is the catalog Resizable's handle, focusable with the label "Resize the wall": the arrow keys move it, Home and End go to its limits. The copy panel can shrink to 26% and the wall to 28%.

Does the block move while I resize?

No. The split has a fixed height from lg; the wall scrolls inside its frame if its rows are taller. The readout is a small badge, and a polite status line speaks only when the column count changes.

Is the resizer the same on every base?

The other bases use react-resizable-panels, with percentage default sizes and minimums.The block looks and reads the same.

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

How does it fit on a phone?

The panels stack: copy, then the wall under it, and the divider is hidden. The wall is as wide as the screen allows, so its container queries give two columns, and it scrolls inside a frame up to 30 rem tall.

All 100 gallery blocks