Grid

Usage

import { Grid } from '@acronis-platform/ui-react';

Grid lays children into a cols column count that steps down at smaller breakpoints, with a configurable gap.

Design-pending v1, ported 1:1 from the legacy shadcn-uikit grid.

Examples

<Grid cols={3} gap="md">
  {items.map((i) => <Card key={i.id} {...i} />)}
</Grid>

For one-dimensional rows/columns use Stack; for tabular data use Table.

With container, columns respond to the grid's own width (container queries) instead of the viewport — ideal for widget grids inside App Shell, whose width changes as the sidebar expands:

<Grid container cols={3}>{cells}</Grid>

API Reference