Grid

import { Grid } from '@yarcl/react';

Equal columns

Revenue

Orders

Visitors

Cards that fit the available space

Overview

Activity

Reports

Sidebar and content

Workspace

<Grid columns={3} gap="md">
  <Card>Revenue</Card>
  <Card>Subscriptions</Card>
  <Card>Orders</Card>
</Grid>

<Grid minItemWidth="16rem">
  <Card>Overview</Card>
  <Card>Activity</Card>
</Grid>

<Grid columns="16rem minmax(0, 1fr)">
  <aside>Navigation</aside>
  <section>Workspace</section>
</Grid>

Numeric columns creates equal-width tracks. Children fill each row in DOM order, then create more rows. It defaults to one column; positive column counts are rounded down, and values below one or non-finite values use one column.

minItemWidth takes precedence over columns and uses CSS auto-fit to fit as many columns as the container permits. The minimum is clamped to the container width so items shrink on small screens. Pass columns={{ base: 1, md: 2, lg: 4 }} for typed viewport breakpoints, or columns={{ base: 1, lg: '16rem minmax(0, 1fr)' }} for responsive track definitions. See responsive props for defaults and sparse maps.

gap accepts scalar keys or breakpoint maps from spacing and resolves from components.Grid.gap, then defaults.gap. Column definitions are caller-supplied layout values stored in an inline CSS custom property; spacing remains in generated token classes. A strict CSP that blocks style attributes requires supplying the column definition through your own CSS.

Use as for semantic elements such as section, nav, or ul; list styles are reset. Grid preserves native semantics and keyboard order. It does not add the interactive ARIA grid role. Use li children with as="ul" or as="ol".

Props

Accepts every native <div> attribute, including ref, className, and style.

Prop	Type	Default	Description
`as`	`LayoutElement`	`'div'`	Element to render. Use `li` children when rendering a list.
`columns`	`Responsive<string \| number>`	`1`	Number of equal-width columns, a CSS grid track definition, or a breakpoint map of either. Ignored when `minItemWidth` is set.
`gap`	`Responsive<Spacing>`config	`config.defaults.gap`	Space between rows and columns, from the `spacing` config. Accepts a scalar or breakpoint map.
`minItemWidth`	`string`		Minimum item width for auto-fit columns. Items shrink to fit narrower containers.