ABBA UIv0.1.0
Layout

Grid

Two-dimensional layout.

Server-renderable1 export

A CSS grid with token-based gaps. Prefer `minItemWidth` over a fixed column count: it produces a track list that reflows on its own, with no media queries to maintain.

Import

import { Grid } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/grid.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Self-reflowing grid

Resize the preview — no breakpoints are involved.

One
Two
Three
<Grid minItemWidth="12rem" gap={4}>
  <Card><CardBody>One</CardBody></Card>
  <Card><CardBody>Two</CardBody></Card>
  <Card><CardBody>Three</CardBody></Card>
</Grid>

Props

Grid props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
columnsnumberFixed number of equal columns. Ignored when minItemWidth is set.
gapSpaceTokenSpace between grid items.
minItemWidthstringMinimum width per item, e.g. "16rem". Produces a self-reflowing grid.

Accessibility

  • Grid does not change reading order; DOM order is what screen readers and keyboard users follow.