Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Container Query Columns Gallery Block for React

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 Base UI. 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.

  • Pro

    Balanced Waterfall Gallery

    Masonry and mosaic

    A waterfall of twelve drawn pictures in two, three or four columns on shared hairlines, a switch between shortest-column and round-robin flow, and bars under the wall that read each column's height.

  • Pro

    Sortable Masonry Gallery

    Masonry and mosaic

    A masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.

  • Pro

    Re-lead Mosaic Gallery

    Masonry and mosaic

    A dense mosaic of nine drawn quilt patterns on shared hairlines, eight squares and one lead two cells wide and two tall, with a Lead control that moves the big square while the rest reflow.

  • Pro

    Split View Gallery

    Stage and thumbnails

    An asset-review split: a listbox of eight files with small drawings at the start, the chosen file's preview and details at the end, and a divider you drag or arrow to resize.

  • Pro

    Density Photo Wall Gallery

    Hairline grids

    Twenty-four small drawn pictures on shared hairlines whose columns follow a Density slider, each offering one action, Copy link, that confirms in place.

  • Pro

    Ratio Switcher Gallery

    Hairline grids

    Six drawn pictures in cells of their own, with a Ratio control (1:1, 4:3, 16:9, 3:2, 9:16, 21:9) that crops every picture to it while keeping each subject in frame, and a chip on every picture naming the ratio.

All 100 gallery blocks