@astriata/grid

The Astriata grid system. A named-area CSS grid with responsive column templates, breakout trays, sidebar layouts, and gap utilities.

Install

pnpm add @astriata/grid

Usage

@use "@astriata/grid" as *;

Import once at the root stylesheet level — not per component.

What's included

• ast-page-grid — top-level page layout (header / main / footer)
• ast-grid-wrapper — tray container with named column lines (full, wide, main)
• ast-tray — content tray with breakout modifiers
• ast-container — content width modifier (--full, --wide, --main)
• ast-main-wrapper — responsive 4/8/12 column grid
• ast-grid-item — span and order utilities via CSS custom properties
• Sidebar layouts — left, right, and middle aside support via pure CSS
• Gap utilities — responsive gap control via inline CSS custom properties

Tray modifiers

<div class="ast-tray">...</div>
<div class="ast-tray ast-tray--break-left">...</div>
<div class="ast-tray ast-tray--break-right">...</div>
<div class="ast-tray ast-tray--break-wide-left">...</div>
<div class="ast-tray ast-tray--break-wide-right">...</div>
<div class="ast-tray ast-tray--wide">...</div>
<div class="ast-tray ast-tray--full">...</div>

Grid item spans

<div class="ast-grid-item" style="--ast-span:12; --ast-span-md:6; --ast-span-lg:4;"></div>

Gap control

<div class="ast-grid-wrapper" style="--ast-gap:1rem; --ast-gap-md:2rem; --ast-gap-lg:3rem;"></div>

Axis-specific gaps:

<div class="ast-grid-wrapper ast-gap--axis" style="--ast-gap-x:2rem; --ast-gap-y:1rem;"></div>

Dependencies

• @astriata/breakpoints