Layout

The layout= attribute sets a complete layout primitive — flex or grid with sensible defaults. Compose with gap=, align=, justify=, and adaptive.

layout="stack"

Flex column. Children stack vertically.

Item A
Item B
Item C
<div layout="stack" gap="sm">
  <div surface="glass" density="compact" radius="md">Item A</div>
  <div surface="glass" density="compact" radius="md">Item B</div>
  <div surface="glass" density="compact" radius="md">Item C</div>
</div>

layout="row"

Flex row with centered alignment by default.

A
B
C
<div layout="row" gap="md">
  <div surface="glass" density="compact" radius="md" grow>A</div>
  <div surface="glass" density="compact" radius="md" grow>B</div>
  <div surface="glass" density="compact" radius="md" grow>C</div>
</div>

layout="cluster"

Flex row with wrap. Great for tag lists and button groups.

Design Engineering Featured Open Source 
<div layout="cluster" gap="sm">
  <span surface="ghost" density="compact" radius="full">Design</span>
  <span surface="ghost" density="compact" radius="full">Engineering</span>
  <span surface="ghost" tone="primary" density="compact" radius="full">Featured</span>
  <span surface="ghost" density="compact" radius="full">Open Source</span>
</div>

layout="grid"

CSS grid using auto-fit minmax. Use cols= to fix the column count.

A
B
C
D
E
F
<!-- Auto-fit responsive grid -->
<div layout="grid" gap="md">
  <div surface="glass" density="spacious" radius="lg">A</div>
  <div surface="glass" density="spacious" radius="lg">B</div>
  <div surface="glass" density="spacious" radius="lg">C</div>
</div>

<!-- Fixed 3 columns -->
<div layout="grid" cols="3" gap="md">...</div>

layout="center"

Centers children both horizontally and vertically.

Centered
<div layout="center" style="height: 120px;">
  <div surface="solid" tone="primary" density="default" radius="md">Centered</div>
</div>

layout="sidebar"

Fixed sidebar + fluid main. Width is controlled by --aura-sidebar-width.

Main content area
<div layout="sidebar" style="--aura-sidebar-width: 200px; height: 160px;">
  <aside surface="matte" density="spacious">Sidebar</aside>
  <main surface="glass" density="spacious">Main content</main>
</div>

layout="masonry"

CSS columns masonry. Items fill columns naturally by height.

Short

Tall

This card has more content and takes up more vertical space in the masonry grid.

Medium

Some text here too.

Short again

Final card

<div layout="masonry" style="--aura-masonry-cols: 3;">
  <div surface="glass" density="spacious" radius="lg">Short card</div>
  <div surface="glass" density="spacious" radius="lg">This one is taller with more content.</div>
  <div surface="glass" density="spacious" radius="lg">Another card</div>
</div>

layout="prose"

Constrains content to 65ch for optimal reading width, centered with inline padding.

Article Title

The prose layout constrains content to 65ch and centers it — exactly the right line length for comfortable reading without a single media query.

<div layout="prose">
  <h2 text="heading">Article Title</h2>
  <p text="body">The prose layout keeps your content readable at any viewport width...</p>
</div>

gap= / align= / justify=

gap=

xs
sm
md
lg
xl 
<div layout="row" gap="xs">...</div>  <!-- 0.25rem -->
<div layout="row" gap="sm">...</div>  <!-- 0.5rem  -->
<div layout="row" gap="md">...</div>  <!-- 1rem    -->
<div layout="row" gap="lg">...</div>  <!-- 1.5rem  -->
<div layout="row" gap="xl">...</div>  <!-- 2.5rem  -->

adaptive

layout="row" adaptive collapses to column on mobile. layout="stack" adaptive expands to row on desktop.

<!-- Collapses to column on screens < 768px -->
<div layout="row" gap="md" adaptive>
  <button surface="solid" tone="primary" density="default" radius="md">Primary</button>
  <button surface="ghost"               density="default" radius="md">Secondary</button>
</div>

grow / shrink / wrap

grow
shrink
<div layout="row" gap="sm">
  <div surface="matte" density="compact" radius="md" grow>Grows to fill</div>
  <div surface="matte" density="compact" radius="md" shrink>Shrinks, no grow</div>
</div>

<div layout="row" gap="sm" wrap>
  <!-- Children wrap when they run out of space -->
</div>