Grid

Usage

import { Grid } from "@raystack/apsara";

Grid Props

Prop	Type	Default
`templateAreas`	`string \| string[]`	-
`autoFlow`	`"row" \| "column" \| "dense" \| "row dense" \| "column dense"`	-
`autoColumns`	`string`	-
`autoRows`	`string`	-
`columns`	`string \| number`	-
`rows`	`string \| number`	-
`gap`	`"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"`	-
`columnGap`	`"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"`	-
`rowGap`	`"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"`	-
`justifyItems`	`"start" \| "end" \| "center" \| "stretch"`	-
`alignItems`	`"start" \| "end" \| "center" \| "stretch"`	-
`justifyContent`	`"start" \| "end" \| "center" \| "stretch" \| "space-around" \| "space-between" \| "space-evenly"`	-
`alignContent`	`"start" \| "end" \| "center" \| "stretch" \| "space-around" \| "space-between" \| "space-evenly"`	-
`inline`	`boolean`	`false`
`asChild`	`boolean`	-

Grid.Item Props

Grid.Item is a wrapper component that must be a direct child of Grid. Use it when you need to customize the positioning or styling of individual grid items.

Prop	Type	Default
`area`	`string`	-
`colStart`	`string \| number`	-
`colEnd`	`string \| number`	-
`rowStart`	`string \| number`	-
`rowEnd`	`string \| number`	-
`colSpan`	`string \| number`	-
`rowSpan`	`string \| number`	-
`justifySelf`	`"start" \| "end" \| "center" \| "stretch"`	-
`alignSelf`	`"start" \| "end" \| "center" \| "stretch"`	-
`asChild`	`boolean`	-

Examples

Basic Usage

<Grid gap="small" rows={2} columns={2}>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Grid.Item>4</Grid.Item>
  <Grid.Item>5</Grid.Item>
  <Grid.Item>6</Grid.Item>
</Grid>

Grid

Usage

Grid Props

Grid.Item Props

Examples

Basic Usage

On this page