Split-layout

Two-panel layout that collapses to a single column when the container width falls below a threshold. Container-aware via grid auto-fit

minmax — no global @media queries.

When to use

Two-column landing sections (content + visual).
Side-by-side comparisons.
A primary panel with a secondary aside.

Variants

Variant	Class / data	Behavior
Default	`.split-layout`	1:1 ratio, auto-collapse
1:1	`data-ratio="1:1"`	Equal panels
1:2 / 2:1	`data-ratio="1:2"` / `2:1`	Narrow + wide
1:3 / 3:1	`data-ratio="1:3"` / `3:1`	Very asymmetric
Center align	`.-center`	Vertically centered
Stretch	`.-stretch`	Panels stretch to row height
Baseline	`.-baseline`	Align to text baseline

Anatomy

<section class="split-layout">
  <div>
    <h2>Left panel content</h2>
    <p>Text or controls.</p>
  </div>
  <div>
    <img class="image -rounded" src="…" alt="…" />
  </div>
</section>

<!-- Asymmetric -->
<section class="split-layout" data-ratio="1:2">
  <div>Sidebar</div>
  <div>Main content</div>
</section>

Tokens used

--space-gap-blocks-l — gap between panels
--space-inset-section-m — outer padding

Component-tier (generated)

--split-layout-panel-min (20rem) — minimum panel width before collapse

Accessibility

Use <section> or appropriate landmark. The grid auto-collapse means mobile users see the panels stacked in source order — keep the source order matching reading order.