Skip to content
Patternfly Logo

Gallery

Examples

Basic

With gutters

Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Gallery layout
classNamestringNo''additional classes added to the Gallery layout
hasGutterbooleanNofalseAdds space between children.

GalleryItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Gallery Item

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