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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines