Gallery

Examples

Basic

With gutter

Grid template minmax() width customization

Grid template columms min value can be applied to .pf-v6-l-gallery. Min-width is set inline as --pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}.

List type

Documentation

Overview

The gallery layout is designed so that all of its children are of uniform size, display horizontally, and wrap responsively.

Usage

Class
Applied to
Outcome
.pf-v6-l-gallery
<div>
Initializes a Gallery layout
.pf-v6-l-gallery__item
<div>
Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
.pf-m-gutter
.pf-v6-l-gallery
Adds space between children by using the globally defined gutter value.
--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}
.pf-v6-l-gallery
Modifies the min value of grid-template-columns declaration at the optional breakpoint.
--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}
.pf-v6-l-gallery
Modifies the max value of grid-template-columns declaration at the optional breakpoint.

CSS variables

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