Skip to content

Gallery

Examples

Basic

With gutters

Adjusting min widths

Adjusting max widths

Adjusting min and max widths

Alternative components

Props

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

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

Edit this page on GitHub

Contribute

Community

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
Copyright © 2014-2026 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines