Live demo — this example is server-driven; run the showcase locally for the interactive version.

Gallery

CSS-grid auto-fill — drop items in, the layout sizes columns to a minimum width and reflows on resize. Best for card galleries and tile views.

Examples

Basic

Six items, no gutter, default 250px min item width. Items fill all available row space evenly.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

With gutter

<code class="ws-code">gutter=true</code> adds 1rem gap between rows and columns.

Card 1

Card 2

Card 3

Card 4

Custom min width

Pass <code class="ws-code">minWidth</code> to override the per-item minimum — wider value = fewer, larger items per row.

Wider card 1

Wider card 2

Wider card 3

Max width

--pf-v6-l-gallery--GridTemplateColumns--max caps tile width.

content

Responsive min width

Min tile width re-set per breakpoint via responsive custom properties.

content

Responsive max width

Max tile width re-set per breakpoint.

content

Responsive min and max width

Both bounds tuned per breakpoint.

content

As a list

The gallery rendered as ul/li for list semantics.

content
content
content
content
content

Documentation

Gallery props

Parameters accepted by {#include layouts/primitives/gallery ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`gutter`	boolean	Adds `pf-m-gutter` — 1rem row + column gap.
`minWidth`	String (CSS length)	Per-item minimum width. Sets `--pf-v6-l-gallery--GridTemplateColumns--min`. Default 250px.
slot `items`	Qute block	Gallery items. Each direct child becomes a grid cell — no per-item wrapper class required.

Usage

Equal-width children. Gallery is CSS-grid repeat(auto-fill, minmax(min, 1fr)) — every item gets the same width. For variable-width spans use Grid.

Common pairing. Gallery + Card is the canonical product-tile catalog.

Edit gallery.html on GitHub