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.import {XDSGridSpan} from '@xds/core/Grid'
Best 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 `XDSHStack` with wrapping for grids — use Grid instead. |