Split
Use a Split layout to position items horizontally in a container, with one item filling the remaining horizontal space as the viewport is resized.
ExamplesDocumentationCSS VariablesExamples
Documentation
Overview
The split layout is designed to position items horizontally, with one item filling the available horizontal space.
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-l-split | <div>, <section>, or <article> | Initiates the split layout. |
.pf-l-split__item | <div> | Initiates a split item. Required |
.pf-m-gutter | .pf-l-split | Adds space between children by using the globally defined gutter value. |
.pf-m-fill | .pf-l-split__item | Specifies which item(s) should fill the avaiable horizontal space. |
CSS Variables
| .pf-l-split | --pf-l-split--m-gutter--MarginRight | 1rem | ||
