Skip to Content
Patternfly Logo

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 Variables

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Documentation

Overview

The split layout is designed to position items horizontally, with one item filling the available horizontal space.

Usage

ClassApplied toOutcome
.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-splitAdds space between children by using the globally defined gutter value.
.pf-m-fill.pf-l-split__itemSpecifies which item(s) should fill the avaiable horizontal space.

CSS Variables

.pf-l-split--pf-l-split--m-gutter--MarginRightl_split_m_gutter_MarginRight
1rem