.container-lg
Use for full portal pages, dashboards, and design system docs.
Layout
Spacing, grid, flex, and containers.
The layout layer follows utility system: containers set page width, grid columns define major layout, flex helpers align content, and spacing utilities keep rhythm consistent.
.grid + .grid-cols-*
Use column utilities for page-level columns and card groups.
.flex-h / .between
Use for button rows, bars, status areas, and aligned controls.
Container utilities
| Class | Width | Use |
|---|---|---|
.container-full | 100% | Full-width page sections. |
.container-xl | clamp(350px, 98%, 2000px) | Very wide layout demos. |
.container-lg | clamp(320px, 90%, 1536px) | Main portal pages and dashboards. |
.container-md | clamp(280px, 85%, 1280px) | Readable content pages. |
.container-sm | clamp(260px, 80%, 1024px) | Narrow copy and forms. |
Spacing utilities
Use spacing classes for inside padding, outside margin, directional padding, and child spacing.
| Pattern | Examples | Use |
|---|---|---|
.in-* | .in-sm, .in-md, .in-lg | Padding on the element. |
.in-y-* / .in-x-* | .in-y-sm, .in-x-md | Vertical or horizontal padding. |
.in-t-* / .in-b-* | .in-t-lg, .in-b-xl | Single-side padding. |
.out-* | .out-y-md, .out-b-lg | Margin spacing. |
.in-dwn-* | .in-dwn-sm, .in-dwn-y-xs | Apply padding to direct children. |
Image ratio utilities
Use .ratio with a named ratio class. Responsive variants are available with sm:, md:, lg:, and xl:.
| Class | Ratio | Use |
|---|---|---|
.ratio-1-1 | 1 / 1 | Square product and profile crops. |
.ratio-3-4 | 3 / 4 | Portrait product imagery. |
.ratio-3-2 | 3 / 2 | Standard editorial images. |
.ratio-16-9 | 16 / 9 | Wide media blocks. |
.ratio-3-1 | 3 / 1 | Banner images. |
.ratio-21-9 | 21 / 9 | Ultra-wide hero areas. |
grid
Start with .grid.
grid-cols
Add .grid-cols-1 through .grid-cols-12.
flex-h middle
Use flex helpers for alignment and control groups.