Gallery
Use a Gallery layout to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.
ExamplesPropsCSS VariablesExamples
Basic
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Gallery Item
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | content rendered inside the Gallery layout |
| className | string | No | '' | additional classes added to the Gallery layout |
| hasGutter | boolean | No | Adds space between children. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | content rendered inside the Gallery Item |
CSS Variables
| .pf-l-gallery | --pf-l-gallery--m-gutter--GridGap | 1rem | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns | repeat(auto-fill, minmax(250px, 1fr)) | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateRows | auto | ||
