Layout

Four single-purpose layout primitives covering the spacing patterns we use most: Stack for vertical, Cluster for horizontal-with-wrap, Grid for auto-fit columns, Masonry for packed columns of variable-height items. Each accepts a --gap CSS variable so the same class works for tight toolbars and breathing-room hero sections. Grid and Masonry also accept --min to set the minimum column width.

Why these: avoids inline style="display: flex; gap: …; flex-direction: column" in markup. They compose freely — a Stack of Clusters is a common form-row pattern.

Stack — vertical with gap

Default gap is --lb-size-4x (16px). Override via inline style="--gap: …". Common gap tokens: 1x (4px) for tight, 2x (8px) for compact, 4x (16px) default, 6x (24px) for breathing room.

Cluster — horizontal with gap, wraps

Use for button rows, tag groups, breadcrumb-like sequences. Wraps when content exceeds available width. Default gap --lb-size-3x (12px) — tighter than Stack since horizontal spacing reads bigger.

Grid — auto-fit columns

Self-responsive grid. Specify the minimum column width via --min; the layout fits as many columns as fit and wraps the rest. The min(var(--min), 100%) trick prevents overflow on viewports narrower than --min.

Composition — the form-row pattern

Stack of Clusters: each cluster is a horizontal row with a label and an input; the stack manages vertical rhythm. Same pattern handles settings panels, multi-field forms, dashboard sections.

Composition — Card grid

Grid of Cards is the most common dashboard pattern. --min drives the card size; the grid handles wrapping for free.

Masonry — packed columns, variable heights

Pinterest-style packed layout. Items with different heights flow into the shortest column instead of aligning to row baselines — useful for photo grids, card walls with mixed-length excerpts, mood boards. Same --min and --gap custom-property API as .lb-grid; built on CSS multi-column for universal browser support.

Reading-order caveat: items flow column-by-column (A → D → G top-to-bottom in column 1, then B → E → H in column 2). Use only for visual content where strict left-to-right reading isn't required. For ordered/scannable lists, use .lb-grid.