Chakra UI Grid - Horizon UI

A primitive useful for grid layouts. Grid is Box with display: grid and it comes with helpful style shorthand. It renders a div element.

Import#

import { Grid, GridItem } from "@chakra-ui/react"
  • Grid: The main wrapper with display: grid.
  • GridItem: Used as a child of Grid to control the span, and start positions within the grid.

Template columns#

Here's an example of using grid template columns with the grid component, and applying a gap or space between the grid items.

<Grid templateColumns="repeat(5, 1fr)" gap={6}>
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
</Grid>
<Grid templateColumns="repeat(5, 1fr)" gap={6}>
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
<Box w="100%" h="10" bg="blue.500" />
</Grid>

Spanning columns#

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the colSpan prop to the GridItem component to span across columns and also pass the rowSpan component to span across rows. You also need to specify the templateColumns and templateRows.

<Grid
h="200px"
templateRows="repeat(2, 1fr)"
templateColumns="repeat(5, 1fr)"
gap={4}
>
<GridItem rowSpan={2} colSpan={1} bg="tomato" />
<GridItem colSpan={2} bg="papayawhip" />
<GridItem colSpan={2} bg="papayawhip" />
<GridItem colSpan={4} bg="tomato" />
</Grid>
<Grid
h="200px"
templateRows="repeat(2, 1fr)"
templateColumns="repeat(5, 1fr)"
gap={4}
>
<GridItem rowSpan={2} colSpan={1} bg="tomato" />
<GridItem colSpan={2} bg="papayawhip" />
<GridItem colSpan={2} bg="papayawhip" />
<GridItem colSpan={4} bg="tomato" />
</Grid>

Starting and ending lines#

Pass the colStart and colEnd prop to GridItem component to make an element start or end at the nth grid position.

<Grid templateColumns="repeat(5, 1fr)" gap={4}>
<GridItem colSpan={2} h="10" bg="tomato" />
<GridItem colStart={4} colEnd={6} h="10" bg="papayawhip" />
</Grid>
<Grid templateColumns="repeat(5, 1fr)" gap={4}>
<GridItem colSpan={2} h="10" bg="tomato" />
<GridItem colStart={4} colEnd={6} h="10" bg="papayawhip" />
</Grid>

Props#

Grid Props#

Grid composes Box so you can pass all the Box prop, and these shorthand prop to save you some time:

area

Description

Short hand prop for gridArea

Type
SystemProps["gridArea"]

autoColumns

Description

Short hand prop for gridAutoColumns

Type
SystemProps["gridAutoColumns"]

autoFlow

Description

Short hand prop for gridAutoFlow

Type
SystemProps["gridAutoFlow"]

autoRows

Description

Short hand prop for gridAutoRows

Type
SystemProps["gridAutoRows"]

column

Description

Short hand prop for gridColumn

Type
SystemProps["gridColumn"]

columnGap

Description

Short hand prop for gridColumnGap

Type
SystemProps["gridColumnGap"]

gap

Description

Short hand prop for gridGap

Type
SystemProps["gridGap"]

row

Description

Short hand prop for gridRow

Type
SystemProps["gridRow"]

rowGap

Description

Short hand prop for gridRowGap

Type
SystemProps["gridRowGap"]

templateAreas

Description

Short hand prop for gridTemplateAreas

Type
SystemProps["gridTemplateAreas"]

templateColumns

Description

Short hand prop for gridTemplateColumns

Type
SystemProps["gridTemplateColumns"]

templateRows

Description

Short hand prop for gridTemplateRows

Type
SystemProps["gridTemplateRows"]

GridItem Props#

colEnd

Type
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>

colSpan

Description

The number of columns the grid item should span.

Type
ResponsiveValue<number | "auto">

colStart

Description

The column number the grid item should start.

Type
ResponsiveValue<number | "auto">

rowEnd

Type
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>

rowSpan

Type
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>

rowStart

Type
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License