Actual CSS

Layout reference

The canonical layout compositions, each built only with the current layout primitives. This page is a reference for what each primitive does today — and where its limits are.

1. Page header

Title on the left, actions on the right. .cluster with --cluster-justify: space-between; the row wraps into two rows when it runs out of room — no viewport decision needed.

Deployments

Review production releases, failed jobs, and pending approvals.

    •

    2. Vertical rhythm

    .stack owns the block axis: direct-child margins are reset, spacing comes from --gap. To group a few items tightly (a title and its description), nest a .stack gap-none — the outer stack keeps its rhythm between groups.

    Ada Meridian Senior designer working on design systems.
    Active

    3. Inline group

    .cluster is the inline group: action rows, tags, toolbars. Its responsiveness is the wrapping itself — it never needs a breakpoint.

    Read docs

    4. Split / one left, one right

    The same .cluster relationship with --cluster-justify: space-between. No separate split primitive.

    Results

    •

    5. Free equal cards

    .grid fits as many --grid-min-wide columns as the row allows and wraps the rest. The number of columns follows the container width.

    Card A
    Card B
    Card C
    Card D

    6. Density preset — .grid-3 alone

    .grid-3 declares a structural density of three columns. It never exceeds three, never overflows, and keeps every item the same width — with no wrapper. Left alone it steps down one column at a time. Use .grid when the item width, not the density, is the contract.

    Item 1
    Item 2
    Item 3

    7. Density preset — balanced subdivision

    Inside a container named actual-container — here the .container-query helper — the same preset only enters a divisor of its density: 3 → 1. Two columns are skipped on purpose, because three items in two columns would leave a lone third. The container is precision, never a prerequisite for responsive behavior — see the grid density page for the full chains.

    Item 1
    Item 2
    Item 3

    10. Asymmetric 2/3 + 1/3

    --grid-columns replaces the intrinsic auto-fit template, so nothing restores collapse: the two columns stay cramped on narrow screens unless the author adds their own collapse rule. For content + aside this is usually .sidebar-layout instead.

    Checklist

    Upload consent form Schedule follow-up call Verify insurance

    11. Media rows

    .media pairs a fixed leading element with flexible trailing content. The content column takes the remaining space and shrinks instead of overflowing.

    AM
    Ada Meridian Senior designer
    JL
    Jana Lindgren Platform engineer

    12. Checklist item

    Icon + content + actions as a nowrap row — the shape the POC generator produced. The framework keeps the row on one line; the author owns what happens when the row is too narrow.

    ✓
    Upload consent form Due today
    Done
    2
    Schedule follow-up call Tomorrow 09:00
    Pending

    13. Peer regions that switch together

    .switcher places peers side by side when they all fit and otherwise stacks every peer. With three children it can produce one row or three rows, never an orphaned 2 + 1 arrangement.

    Billing address

    Main invoice recipient.

    Shipping address

    Where goods are delivered.

    Delivery options

    When and how goods arrive.

    14. Avatar + text + actions

    .media for the avatar/text pair, with the actions nested inside the flexible column so they wrap under the text when the row narrows. The avatar aligns to the top (start, the default) because the content column is multi-line; centering is only for short single-line pairs.

    AM
    Dr. Ada Meridian Cardiology
    JL
    Dr. Jana Lindgren Neurology