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 | |
|---|---|---|---|---|
| :where(:root) | --pf-v6-l-gallery--m-gutter--GridGap | 24px | ||
--pf-v6-l-gallery--m-gutter--GridGap --pf-t--global--spacer--lg --pf-t--global--spacer--400 24px | ||||
| :where(:root) | --pf-v6-l-gallery--GridTemplateColumns--min | 250px | ||
| :where(:root) | --pf-v6-l-gallery--GridTemplateColumns--minmax--min | 250px | ||
--pf-v6-l-gallery--GridTemplateColumns--minmax--min --pf-v6-l-gallery--GridTemplateColumns--min 250px | ||||
| :where(:root) | --pf-v6-l-gallery--GridTemplateColumns--max | 1fr | ||
| :where(:root) | --pf-v6-l-gallery--GridTemplateColumns--minmax--max | 1fr | ||
--pf-v6-l-gallery--GridTemplateColumns--minmax--max --pf-v6-l-gallery--GridTemplateColumns--max 1fr | ||||
| :where(:root) | --pf-v6-l-gallery--GridTemplateColumns | repeat(auto-fill, minmax(250px, 1fr)) | ||
--pf-v6-l-gallery--GridTemplateColumns repeat(auto-fill, minmax(--pf-v6-l-gallery--GridTemplateColumns--minmax--min, --pf-v6-l-gallery--GridTemplateColumns--minmax--max)) repeat(auto-fill, minmax(--pf-v6-l-gallery--GridTemplateColumns--min, --pf-v6-l-gallery--GridTemplateColumns--max)) repeat(auto-fill, minmax(250px, 1fr)) | ||||
| :where(:root) | --pf-v6-l-gallery--GridTemplateRows | auto | ||
| .pf-v6-l-gallery | --pf-v6-l-gallery--GridTemplateColumns--minmax--min | 250px | ||
--pf-v6-l-gallery--GridTemplateColumns--minmax--min --pf-v6-l-gallery--GridTemplateColumns--min 250px | ||||
| .pf-v6-l-gallery | --pf-v6-l-gallery--GridTemplateColumns--minmax--max | 1fr | ||
--pf-v6-l-gallery--GridTemplateColumns--minmax--max --pf-v6-l-gallery--GridTemplateColumns--max 1fr | ||||
View source on GitHub
