Skip to content
Patternfly Logo

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

.pf-l-gallery--pf-l-gallery--m-gutter--GridGap
1rem
.pf-l-gallery--pf-l-gallery--GridTemplateColumns--min
250px
.pf-l-gallery--pf-l-gallery--GridTemplateColumns--minmax--min
250px
.pf-l-gallery--pf-l-gallery--GridTemplateColumns--max
1fr
.pf-l-gallery--pf-l-gallery--GridTemplateColumns--minmax--max
1fr
.pf-l-gallery--pf-l-gallery--GridTemplateColumns
repeat(auto-fill, minmax(250px, 1fr))
.pf-l-gallery--pf-l-gallery--GridTemplateRows
auto

View source on GitHub