Examples
Grid template minmax() width customization
Grid template columms min value can be applied to .pf-l-gallery. Min-width is set inline as --pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}.
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-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--GridTemplateColumns--min{-on-[breakpoint]}: {width} | .pf-l-gallery | Modifies the min value of grid-template-columns declaration at the optional breakpoint. |
--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width} | .pf-l-gallery | Modifies the max value of grid-template-columns declaration at the optional breakpoint. |
CSS variables
| .pf-l-gallery | --pf-l-gallery--m-gutter--GridGap | 1rem | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns--min | 250px | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns--minmax--min | 250px | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns--max | 1fr | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns--minmax--max | 1fr | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateColumns | repeat(auto-fill, minmax(250px, 1fr)) | ||
| .pf-l-gallery | --pf-l-gallery--GridTemplateRows | auto | ||
View source on GitHub