Layout
Flexbox, Grid, and Container utilities using semantic attributes
Overview
Shift CSS uses semantic attribute selectors for structural layout patterns. This creates a declarative API where attributes define the “skeleton” of your UI.
- Structural layout → Attribute selectors (
s-flex,s-grid,s-container) - Atomic utilities → Classes with
s-prefix (.s-flex-1,.s-w-full)
Flexbox
Basic Flex Container
<div s-flex>Flex container</div>
<div s-flex="row">Horizontal (explicit)</div>
<div s-flex="col">Vertical stack</div>Direction Variants
| Attribute | Description |
|---|---|
s-flex | Basic flex container |
s-flex="row" | Horizontal (default) |
s-flex="col" | Vertical stack |
s-flex="row-reverse" | Horizontal reversed |
s-flex="col-reverse" | Vertical reversed |
Common Patterns
<!-- Center everything -->
<div s-flex="center">Perfectly centered</div>
<!-- Space between with vertical centering -->
<div s-flex="between">
<span>Left</span>
<span>Right</span>
</div>
<!-- End-aligned -->
<div s-flex="end">
<button>Action</button>
</div>
<!-- Vertical stack -->
<div s-flex="stack">
<div>Item 1</div>
<div>Item 2</div>
</div>Flex Wrap
Use space-separated values to add wrap:
<div s-flex="row wrap">Wrapping flex row</div>
<div s-flex="col nowrap">Non-wrapping column</div>Alignment Modifiers
Combine with alignment attributes for fine control:
<div s-flex s-justify="between" s-items="center">
<span>Left</span>
<span>Right</span>
</div>Justify Content:
| Attribute | CSS Value |
|---|---|
s-justify="start" | flex-start |
s-justify="end" | flex-end |
s-justify="center" | center |
s-justify="between" | space-between |
s-justify="around" | space-around |
s-justify="evenly" | space-evenly |
Align Items:
| Attribute | CSS Value |
|---|---|
s-items="start" | flex-start |
s-items="end" | flex-end |
s-items="center" | center |
s-items="baseline" | baseline |
s-items="stretch" | stretch |
Flex Item Classes
For child element sizing, use atomic classes:
<div s-flex>
<div class="s-flex-1">Grow equally</div>
<div class="s-flex-1">Grow equally</div>
</div>
<div s-flex>
<div class="s-flex-none">Fixed size</div>
<div class="s-flex-auto">Grow and shrink</div>
</div>
<div s-flex>
<div class="s-grow">Grow to fill</div>
<div class="s-shrink-0">Don't shrink</div>
</div>| Class | CSS Value |
|---|---|
.s-flex-1 | flex: 1 1 0% |
.s-flex-auto | flex: 1 1 auto |
.s-flex-initial | flex: 0 1 auto |
.s-flex-none | flex: none |
.s-grow | flex-grow: 1 |
.s-grow-0 | flex-grow: 0 |
.s-shrink | flex-shrink: 1 |
.s-shrink-0 | flex-shrink: 0 |
Self Alignment
<div s-flex="row">
<div class="s-self-start">Top</div>
<div class="s-self-center">Center</div>
<div class="s-self-end">Bottom</div>
</div>CSS Grid
Basic Grid
<div s-grid>Basic grid</div>
<div s-grid="3">3 equal columns</div>Column Variants
| Attribute | Description |
|---|---|
s-grid | Basic grid container |
s-grid="1" | 1 column |
s-grid="2" | 2 columns |
s-grid="3" | 3 columns |
s-grid="4" | 4 columns |
s-grid="5" | 5 columns |
s-grid="6" | 6 columns |
s-grid="12" | 12 columns |
s-grid="auto-fit" | Responsive auto-fit |
s-grid="auto-fill" | Responsive auto-fill |
Responsive Grid
The auto-fit variant creates a responsive grid without media queries:
<div s-grid="auto-fit" s-gap="md">
<article s-card>Card 1</article>
<article s-card>Card 2</article>
<article s-card>Card 3</article>
</div>Grid Rows
<div s-grid="2" s-grid-rows="3">
<!-- 2 columns × 3 rows -->
</div>Column & Row Span
<div s-grid="6">
<div s-col-span="2">Spans 2 columns</div>
<div s-col-span="4">Spans 4 columns</div>
<div s-col-span="full">Full width</div>
</div>
<div s-grid="3" s-grid-rows="3">
<div s-row-span="2">Spans 2 rows</div>
<div s-row-span="full">Full height</div>
</div>Gap (Spacing)
Semantic Gap (Designer’s Tool)
For consistent, design-system-aligned spacing:
<div s-flex s-gap="md">Consistent medium gap</div>
<div s-grid="3" s-gap="lg">Comfortable grid spacing</div>| Attribute | Value | Use Case |
|---|---|---|
s-gap | 1rem | Default (same as md) |
s-gap="xs" | 0.25rem | Extra tight |
s-gap="sm" | 0.5rem | Compact |
s-gap="md" | 1rem | Standard |
s-gap="lg" | 1.5rem | Comfortable |
s-gap="xl" | 2rem | Spacious |
s-gap="none" | 0 | No gap |
Atomic Gap (Developer’s Screwdriver)
For precise pixel-level control, use gap classes:
<div s-flex class="s-gap-4">Exact 1rem gap</div>
<div s-grid="3" class="s-gap-x-4 s-gap-y-2">Different row/column gaps</div>Container
Basic Container
<div s-container>
Centered with max-width and padding
</div>Size Variants
| Attribute | Max Width |
|---|---|
s-container | 80rem (1280px) |
s-container="sm" | 40rem (640px) |
s-container="md" | 48rem (768px) |
s-container="lg" | 64rem (1024px) |
s-container="xl" | 80rem (1280px) |
s-container="full" | 100% |
s-container="prose" | 65ch |
Custom Container Width
:root {
--s-container-max: 1400px;
}Position
<div s-position="relative">
<div s-position="absolute" s-inset="0">Overlay</div>
</div>
<header s-position="sticky">Sticky header</header>
<div s-position="fixed">Fixed element</div>Display
For non-flex/grid display modes:
<span s-display="block">Block element</span>
<div s-display="inline">Inline element</div>
<div s-display="inline-block">Inline block</div>
<div s-display="contents">Contents (removes wrapper)</div>
<div s-display="inline-flex">Inline flex</div>
<div s-display="inline-grid">Inline grid</div>Sizing Classes
Width
<div class="s-w-full">100% width</div>
<div class="s-w-screen">100vw width</div>
<div class="s-w-min">min-content</div>
<div class="s-w-max">max-content</div>
<div class="s-w-fit">fit-content</div>
<div class="s-w-auto">auto</div>Height
<div class="s-h-full">100% height</div>
<div class="s-h-screen">100vh height</div>
<div class="s-h-screen-dvh">100dvh (dynamic viewport)</div>
<div class="s-h-min">min-content</div>
<div class="s-h-max">max-content</div>
<div class="s-h-fit">fit-content</div>Min/Max Width
<div class="s-min-w-0">min-width: 0</div>
<div class="s-min-w-full">min-width: 100%</div>
<div class="s-max-w-md">max-width: 28rem</div>
<div class="s-max-w-prose">max-width: 65ch</div>Aspect Ratio
<div class="s-aspect-square">1:1</div>
<div class="s-aspect-video">16:9</div>
<div class="s-aspect-4-3">4:3</div>Z-Index
<div class="s-z-10">z-index: 10</div>
<div class="s-z-50">z-index: 50</div>
<div class="s-z-auto">z-index: auto</div>Common Patterns
Centered Content
<div s-flex="center" class="s-min-h-screen">
Perfectly centered
</div>Sidebar Layout
<div s-flex>
<aside class="s-flex-none s-w-64">Sidebar</aside>
<main class="s-flex-1">Main content</main>
</div>Card Grid
<div s-grid="auto-fit" s-gap="md">
<article s-card>Card 1</article>
<article s-card>Card 2</article>
<article s-card>Card 3</article>
</div>Holy Grail Layout
<div s-flex="col" class="s-min-h-screen">
<header class="s-flex-none">Header</header>
<main class="s-flex-1">Content</main>
<footer class="s-flex-none">Footer</footer>
</div>Navigation Bar
<nav s-flex="between" s-gap="md" class="s-px-4 s-py-2">
<a href="/">Logo</a>
<div s-flex s-gap="sm">
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>
</nav>