React

Gallery

ExamplesPropsCSS Variables

Examples

Basic

With gutters

Props

Gallery properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Gallery layout
classNamestring''additional classes added to the Gallery layout
gutter'sm' | 'md' | 'lg'nullAdds space between children.
GalleryItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Gallery Item

CSS Variables

--pf-l-gallery--GridTemplateColumnsl_gallery_GridTemplateColumns
repeat(auto-fill,minmax(250px,1fr))
--pf-l-gallery--GridTemplateRowsl_gallery_GridTemplateRows
auto
--pf-l-gallery--m-gutter--GridGapl_gallery_m_gutter_GridGap
1.5rem
--pf-l-gallery--m-gutter--md--GridGapl_gallery_m_gutter_md_GridGap
1rem