Examples
Basic
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Adjusting min widths
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Adjusting max widths
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Adjusting min and max widths
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Props
Gallery
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | content rendered inside the Gallery layout |
className | string | '' | additional classes added to the Gallery layout |
component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
hasGutter | boolean | false | Adds 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
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | content rendered inside the Gallery Item |
component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.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 |