Grid · Astryx

Grid@astryxdesign/core v0.1.1 · Grid

Usage

A CSS grid layout container for arranging children in rows and columns. Use Grid for card galleries, dashboards, and any multi-column layout. Supports fixed column counts and responsive columns that reflow based on available width.

ts
import {Grid} from '@astryxdesign/core/Grid'

Best practices

Guidance	Practices
Do	Use responsive columns for layouts that should adapt to screen size: `columns={{minWidth: 280}}`.
Do	Cap the column count with `max` to prevent rows from getting too wide on large screens.
Do	Use `repeat: 'fill'` (the default) for consistent item widths. Use `'fit'` when items should stretch to fill leftover space.
Don't	Write manual CSS grid; Grid handles spacing and responsive behavior for you.
Don't	Use `HStack` with wrapping for grids; use Grid instead.

Examples

Common configurations, variations, and states.

Grid — Dashboard Layout

Open in Playground

Dashboard layout with mixed-size widgets and a full-width summary row

Grid — Card Gallery

Open in Playground

Card gallery with responsive columns that maintain consistent widths

Grid — Responsive Auto-Fit

Open in Playground

Responsive grid where cards stretch to fill remaining space

Grid — Column Spanning

Open in Playground

Grid with featured items spanning multiple columns and rows