Grid

Responsive grid layout.

layoutgridresponsive

Import

import { Grid, GridItem } from "@/components/ui";

Basic Usage

Grid Preview

4 (span 2)

Code

tsx

<Grid cols={{ base: 1, md: 2, lg: 3 }} gap="md">
  <GridItem>Item 1</GridItem>
  <GridItem>Item 2</GridItem>
  <GridItem>Item 3</GridItem>
</Grid>

Column Span

Items spanning multiple columns

1<Grid cols={4} gap="md">
2  <GridItem colSpan={2}>Spans 2 columns</GridItem>
3  <GridItem>Item 2</GridItem>
4  <GridItem>Item 3</GridItem>
5  <GridItem colSpan={4}>Full width</GridItem>
6</Grid>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring

Grid

Responsive grid layout.

layoutgridresponsive

Import

import { Grid, GridItem } from "@/components/ui";

Basic Usage

Grid Preview

4 (span 2)

Code

tsx

<Grid cols={{ base: 1, md: 2, lg: 3 }} gap="md">
  <GridItem>Item 1</GridItem>
  <GridItem>Item 2</GridItem>
  <GridItem>Item 3</GridItem>
</Grid>

Column Span

Items spanning multiple columns

1<Grid cols={4} gap="md">
2  <GridItem colSpan={2}>Spans 2 columns</GridItem>
3  <GridItem>Item 2</GridItem>
4  <GridItem>Item 3</GridItem>
5  <GridItem colSpan={4}>Full width</GridItem>
6</Grid>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring