Grid

BetaRSC-safe

L1 — Primitive de layout CSS Grid : colonnes fixes avec breakpoints (colsSm/Md/Lg) ou mode auto-fit (minChildWidth). RSC-safe, zéro dépendance client.

import { Grid } from "@lyra/tokens/components";

Playground

Démo interactive — réglages du playground (props ajustables en direct) à venir.

<Grid cols={1} colsMd={2} colsLg={3} gap={5}>
  <Card />
  <Card />
  <Card />
</Grid>

<Grid minChildWidth="240px" gap={4}>
  {items.map((i) => <Card key={i.id} {...i} />)}
</Grid>

Documentation

cols=3
123
auto-fit
ABC

cols, colsSm, colsMd, colsLg, minChildWidth, gap, align, as

<Grid cols={1} colsMd={2} colsLg={3} gap={5}>
  <Card />
  <Card />
  <Card />
</Grid>

<Grid minChildWidth="240px" gap={4}>
  {items.map((i) => <Card key={i.id} {...i} />)}
</Grid>