Gallery

Use a Gallery layout to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.

Examples

content

content

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

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 by using the globally defined gutter value.


	.pf-l-gallery	--pf-l-gallery--m-gutter--GridGap	1rem
--pf-l-gallery--m-gutter--GridGap --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-l-gallery	--pf-l-gallery--GridTemplateColumns	repeat(auto-fill, minmax(250px, 1fr))
	.pf-l-gallery	--pf-l-gallery--GridTemplateRows	auto