Skip to Content
Patternfly Logo

Gallery

Use a Gallery layout to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.

ExamplesPropsCSS Variables

Examples

Basic

With gutters

Props

Gallery properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Gallery layout
classNamestringNo''additional classes added to the Gallery layout
gutter'sm' | 'md' | 'lg'NonullAdds space between children.
GalleryItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent 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