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.

Intentionally undesigned — no Figma design is expected. Grid renders no visuals, only column/gap structure, so there is nothing for a designer to draw as a component. 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 the App Shell, whose width changes as the sidebar expands:

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

API Reference