Grid @astryx-svelte/core v0.3.0 · 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
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. |
| Do | Track templates use CSS-variable indirection (not raw inline styles), so xstyle overrides of gridTemplateColumns (including inside @media queries) take effect. |
Examples
Common configurations, variations, and states.Grid — Dashboard Layout
Dashboard layout with mixed-size widgets and a full-width summary row
Grid — Card Gallery
Card gallery with responsive columns that maintain consistent widths
Grid — Responsive Auto-Fit
Responsive grid where cards stretch to fill remaining space
Grid — Column Spanning
Grid with featured items spanning multiple columns and rows