Gallery

Examples

Basic

With gutters

Adjusting min widths

Adjusting max widths

Adjusting min and max widths

Alternative components

Props

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Gallery layout
classNamestring''additional classes added to the Gallery layout
componentReact.ElementType<any> | React.ComponentType<any>'div'Sets the base component to render. defaults to div
hasGutterbooleanfalseAdds space between children.
maxWidths{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }Maximum widths at various breakpoints.
minWidths{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }Minimum widths at various breakpoints.

GalleryItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Gallery Item
componentReact.ElementType<any> | React.ComponentType<any>'div'Sets the base component to render. defaults to div

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--m-gutter--GridGap
24px
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateColumns--min
250px
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateColumns--minmax--min
250px
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateColumns--max
1fr
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateColumns--minmax--max
1fr
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateColumns
repeat(auto-fill, minmax(250px, 1fr))
:where(:root, .pf-v6-l-gallery)--pf-v6-l-gallery--GridTemplateRows
auto
.pf-v6-l-gallery--pf-v6-l-gallery--GridTemplateColumns--minmax--min
250px
.pf-v6-l-gallery--pf-v6-l-gallery--GridTemplateColumns--minmax--max
1fr

View source on GitHub