Layout — Recipes

Common layouts composed only from and-layout and and-text tokens — no custom CSS, no JavaScript. Every example below is live; resize the window to see the responsive ones respond.

Center a block

m-x:auto on a width-constrained block centers it horizontally — the spacing scale’s auto value resolves to margin: auto:

max-width + m-x:auto

<div and-layout="m-x:auto p:md" style="max-width: 20rem;">Centered</div>

To center content (rather than the box itself), use the flex tokens instead — horizontal justify:center align:center:

<div
  and-layout="horizontal justify:center align:center"
  style="min-height: 8rem;"
>
  <span>Perfectly centered child</span>
</div>

Toolbar / header bar

The workhorse row: horizontal + align:center to line items up on their vertical center, + justify:between to push groups to opposite ends.

Dashboard

Settings New

<header and-layout="horizontal align:center justify:between gap:sm p:sm">
  <span and-text="h6">Dashboard</span>
  <div and-layout="horizontal align:center gap:xs">
    <and-button variant="ghost">Settings</and-button>
    <and-button>New</and-button>
  </div>
</header>

Responsive card grid

cols:1 on mobile, widening at each breakpoint. Because breakpoints are mobile-first and stacked, the largest matching one wins:

Card one Reflows from 1 → 2 → 3 columns.

Card two Try resizing the window.

Card three Gap stays constant at md.

<div and-layout="grid cols:1 cols@sm:2 cols@lg:3 gap:md">
  <article and-layout="p:md vertical gap:xxs">…</article>
  <article and-layout="p:md vertical gap:xxs">…</article>
  <article and-layout="p:md vertical gap:xxs">…</article>
</div>

Media object

Fixed-size figure beside flexible text — horizontal gap:md align:start, with the text column as a nested vertical stack:

Ada Lovelace Avatar stays fixed; this text column flexes to fill the rest of the row.

<div and-layout="horizontal gap:md align:start">
  <img src="avatar.jpg" style="width: 3rem; height: 3rem; flex: none;" />
  <div and-layout="vertical gap:xxs">
    <span and-text="p weight:semibold">Ada Lovelace</span>
    <span and-text="p-sm color:muted">Supporting copy…</span>
  </div>
</div>

Sidebar shell

A grid whose sidebar takes one column and content spans the rest — collapses to a single stacked column below md by dropping back to cols:1:

Sidebar

Content — span@md:3

<div and-layout="grid cols:1 cols@md:4 gap:sm">
  <nav>Sidebar</nav>
  <main and-layout="span@md:3">Content</main>
</div>

Below md the grid is a single column, so both children stack full-width; from md up it becomes four columns and span@md:3 gives the content three of them, leaving one for the sidebar.

Vertical stack

The simplest and most common one: vertical + a gap for evenly-spaced children, no margins needed.

<div and-layout="vertical gap:md">
  <h2 and-text="h2">Section title</h2>
  <p and-text="p">First paragraph.</p>
  <p and-text="p">Second paragraph, evenly spaced by the gap.</p>
</div>