Grid

A flexible and powerful component for grid layout

Anatomy

Import and assemble the component:

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

3<Grid>
4  <Grid.Item />
5  <Grid.Item />
6</Grid>

API Reference

Root

Prop

Type

Item

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

Examples

Basic Usage

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

Accessibility

  • Uses semantic HTML for proper document structure
  • Supports standard content accessibility patterns