layout component

Drop-in semantic component. See examples, sizes, variants, and source.

Semantic alternative to raw flex / grid / gap utility chains. Each primitive is a single noun (stack row grid container spacer bento shell) whose behavior is tuned by a small shared vocabulary: density (compact cozy spacious), alignment (start end between), spacer t-shirt sizes, and the featured role inside bento. Adjectives that don't apply to a given noun are silently ignored. Pure CSS — no JS.

Layout Primitives

Density is the cross-cutting adjective: setting it once on an outer surface cascades to nested layouts unless overridden. Direction-aware primitives additionally accept horizontal or vertical to flip their main axis.

Stack

Vertical layout. Default density is cozy (gap-4); use compact for tighter stacks or spacious for breathing room.

Default (cozy)

Item 1

Item 2

Item 3

<div class="stack">
                <div class="bg-gray-100 p-3 rounded">Item 1</div>
                <div class="bg-gray-100 p-3 rounded">Item 2</div>
                <div class="bg-gray-100 p-3 rounded">Item 3</div>
            </div>

Compact

Item 1

Item 2

Item 3

<div class="stack compact">
                <div class="bg-gray-100 p-3 rounded">Item 1</div>
                <div class="bg-gray-100 p-3 rounded">Item 2</div>
                <div class="bg-gray-100 p-3 rounded">Item 3</div>
            </div>

Spacious

Item 1

Item 2

Item 3

<div class="stack spacious">
                <div class="bg-gray-100 p-3 rounded">Item 1</div>
                <div class="bg-gray-100 p-3 rounded">Item 2</div>
                <div class="bg-gray-100 p-3 rounded">Item 3</div>
            </div>

Row

Horizontal layout, items vertically centered by default.

Default (cozy)

<div class="row">
                <button class="button primary">Save</button>
                <button class="button outline">Cancel</button>
                <div class="spacer"></div>
                <button class="button ghost">Help</button>
            </div>

Compact

New Active Error

<div class="row compact">
                <span class="badge primary">New</span>
                <span class="badge positive">Active</span>
                <span class="badge negative">Error</span>
            </div>

Spacious

<div class="row spacious">
                <div class="bg-gray-100 p-3 rounded">A</div>
                <div class="bg-gray-100 p-3 rounded">B</div>
                <div class="bg-gray-100 p-3 rounded">C</div>
            </div>

Grid

Auto-responsive grid: 1 column on mobile, 2 on tablet, 3 on desktop.

Default

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

<div class="grid">
                <div class="bg-gray-100 p-4 rounded">Card 1</div>
                <div class="bg-gray-100 p-4 rounded">Card 2</div>
                <div class="bg-gray-100 p-4 rounded">Card 3</div>
                <div class="bg-gray-100 p-4 rounded">Card 4</div>
                <div class="bg-gray-100 p-4 rounded">Card 5</div>
                <div class="bg-gray-100 p-4 rounded">Card 6</div>
            </div>

Spacious

Card 1

Card 2

Card 3

<div class="grid spacious">
                <div class="bg-gray-100 p-4 rounded">Card 1</div>
                <div class="bg-gray-100 p-4 rounded">Card 2</div>
                <div class="bg-gray-100 p-4 rounded">Card 3</div>
            </div>

Container

Centered, max-width content wrapper. Default caps at max-w-7xl; compact narrows to max-w-3xl, spacious opens to max-w-screen-2xl.

Default

Page content sits inside this max-width wrapper.

<div class="container bg-gray-100 p-4 rounded">
                Page content sits inside this max-width wrapper.
            </div>

Compact (article width)

Narrower for prose-heavy content.

<div class="container compact bg-gray-100 p-4 rounded">
                Narrower for prose-heavy content.
            </div>

Spacer

Flex spacer. Bare spacer grows to fill available space. Sized variants (xs/sm/md/lg/xl) take a fixed amount.

Pushing items apart

<div class="row">
                <button class="button">Back</button>
                <div class="spacer"></div>
                <button class="button primary">Next</button>
            </div>

Fixed spacer (lg)

<div class="row">
                <button class="button">A</button>
                <div class="spacer lg"></div>
                <button class="button">B</button>
            </div>

Bento

Asymmetric grid for marketing/feature blocks. The featured role spans 2×2.

Bento with a featured block

Featured (2×2)

<div class="bento">
                <div class="bg-gray-100 p-4 rounded featured">Featured (2&times;2)</div>
                <div class="bg-gray-100 p-4 rounded">B</div>
                <div class="bg-gray-100 p-4 rounded">C</div>
                <div class="bg-gray-100 p-4 rounded">D</div>
                <div class="bg-gray-100 p-4 rounded">E</div>
            </div>

Shell

Full-page application frame: a CSS Grid with header / sidebar / main areas. Used as the page-root wrapper for app-shaped layouts. Not previewed inline because it requires height: 100vh.

<div class="shell">
  <header class="header">…</header>
  <aside class="sidebar">…</aside>
  <main class="main">…</main>
</div>

Class API Reference

Type	Class	Usage	Notes
Primitives	`stack`	Vertical flex column	Default gap: 1rem (cozy)
	`row`	Horizontal flex row, items vertically centered	Default gap: 1rem (cozy)
	`grid`	Auto-responsive grid (1 → 2 → 3 cols)	Breakpoints: 640px, 1024px
	`container`	Centered max-width wrapper	Default cap: 80rem (max-w-7xl)
	`spacer`	Flex spacer — fills available space by default	Sized variants take fixed amount
	`bento`	Asymmetric grid for marketing blocks	4 cols desktop, 2 tablet, 1 mobile
	`shell`	Full-page app frame (header / sidebar / main)	CSS Grid; requires `height: 100vh`
Density	`compact`	gap-2 (0.5rem)	Cascades to nested primitives
	(default cozy)	gap-4 (1rem)	No class needed
	`spacious`	gap-6 (1.5rem)	Cascades to nested primitives
Row Alignment	`start`	justify-content: flex-start	Modifier on `row`
	`end`	justify-content: flex-end	Modifier on `row`
	`between`	justify-content: space-between	Modifier on `row`
	`top` / `bottom`	align-items: flex-start / flex-end	Modifier on `row`
	`wrap`	flex-wrap: wrap	Modifier on `row`
	`featured`	2×2 span inside `bento`	Role on a child element
Spacer Sizes	`xs`	0.5rem fixed	Modifier on `spacer`
	`sm`	1rem fixed	Modifier on `spacer`
	`md`	1.5rem fixed	Modifier on `spacer`
	`lg`	2rem fixed	Modifier on `spacer`
	`xl`	3rem fixed	Modifier on `spacer`
Container Width	(default)	80rem (max-w-7xl, 1280px)	No class needed
	`compact`	48rem (max-w-3xl, 768px)	Article width
	`spacious`	96rem (max-w-screen-2xl, 1536px)	Wide layouts
Shell Parts	`header`	Top bar (spans full width)	Direct child of `shell`
	`sidebar`	Left navigation column	Direct child of `shell`
	`main`	Main content area	Direct child of `shell`