Grid - Dreamy UI

Dreamy UI

Your UI

Grid

Grid is a div tag that is Gridbox by default.

#

Import

Grid - The Grid component.
GridItem - The item for a grid.

import { Grid, GridItem } from "@dreamy-ui/react/rsc";

#

Usage

Base usage of a grid.

1

2

3

1

2

3

<Grid color='white' columns={3}>
    <GridItem bg='green.400' p={2} color='black'>1</GridItem>
    <GridItem bg='blue.400' p={2}>2</GridItem>
    <GridItem bg='purple.400' p={2}>3</GridItem>
    <GridItem bg='green.400' p={2} color='black'>1</GridItem>
    <GridItem bg='blue.400' p={2}>2</GridItem>
    <GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>

#

Using columns, colSpan and rowSpan

1

2

3

<Grid color='white' columns={3}>
    <GridItem colSpan={2} bg='green.400' p={2} color='black'>1</GridItem>
    <GridItem rowSpan={2} bg='blue.400' p={2}>2</GridItem>
    <GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>