HTML

Gallery

ExamplesDocumentationCSS Variables

Examples

Basic

With gutter

Documentation

Overiew

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

Usage

ClassApplied toOutcome
.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-galleryAdds space between children by using the globally defined gutter value.

CSS Variables

--pf-l-gallery--GridTemplateColumnsl_gallery_GridTemplateColumns
repeat(auto-fill,minmax(250px,1fr))
--pf-l-gallery--GridTemplateRowsl_gallery_GridTemplateRows
auto
--pf-l-gallery--m-gutter--GridGapl_gallery_m_gutter_GridGap
1.5rem
--pf-l-gallery--m-gutter--md--GridGapl_gallery_m_gutter_md_GridGap
1rem