HTML

ExamplesDocumentationCSS Variables

Examples

Copied to clipboard
Copied to clipboard

Documentation

Overview

A Gallery layout makes all of the children a uniform size, the children are displayed horizontally, and they wrap as needed.

Usage

Class Applied To Outcome
.pf-l-gallery <div> Initializes a Gallery layout
.pf-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-l-gallery Adds space between children

CSS Variables

--pf-l-gallery--GridTemplateColumnsl_gallery_GridTemplateColumnsrepeat(auto-fill,minmax(250px,1fr))
--pf-l-gallery--GridTemplateRowsl_gallery_GridTemplateRowsauto
--pf-l-gallery--m-gutter--GridGapl_gallery_m_gutter_GridGap1.5rem