Live demo — this example is server-driven; run the showcase locally for the interactive version.

Split

Horizontal layout where items default to their natural content width. Set pf-m-fill on one item to make it absorb the remaining space — the classic three-column "sidebar / body / aside" pattern.

Examples

Basic

Items sized to content — no fill, no gap. They cluster at the start.

Sidebar

Body

Aside

With fill

Add <code class="ws-code">pf-m-fill</code> to one item — it grows to consume all remaining horizontal space.

Sidebar

Body — fills the space

Aside

With gutter

<code class="ws-code">gutter=true</code> adds 1rem column-gap between items.

One

Two

Three

Wrappable

pf-m-wrap lets split items wrap instead of overflowing.

content

Documentation

Split props

Parameters accepted by {#include layouts/primitives/split ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`gutter`	boolean	Adds `pf-m-gutter` — 1rem gap.
`wrap`	boolean	Adds `pf-m-wrap` — items break to a new line when they overflow.
slot `items`	Qute block	Split children — wrap each in `pf-v6-l-split__item`; add `pf-m-fill` to the one that should grow.

Usage

One fill, many items. Set pf-m-fill on exactly one item. If you set it on more than one, each consumes some of the space — usually not what you want.

Stack vs. Split. Split is the horizontal twin of Stack — same semantics (fill, gutter) but laid out left-to-right instead of top-to-bottom.

Edit split.html on GitHub