Grid
Grid is a layout for managing grid layouts
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.
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
.
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.
Template areas
The templateAreas
prop specifies areas within the grid layout. Use template
literals to name the area. Now you can reference the area by passing area
prop
in the <GridItem />
component.
Props
Grid Props
Grid composes Box
so you can pass all the Box
prop, and these shorthand prop
to save you some time:
autoColumns
autoColumns
Shorthand prop for gridAutoColumns
SystemProps["gridAutoColumns"]
autoFlow
autoFlow
Shorthand prop for gridAutoFlow
SystemProps["gridAutoFlow"]
autoRows
autoRows
Shorthand prop for gridAutoRows
SystemProps["gridAutoRows"]
column
column
Shorthand prop for gridColumn
SystemProps["gridColumn"]
row
row
Shorthand prop for gridRow
SystemProps["gridRow"]
templateAreas
templateAreas
Shorthand prop for gridTemplateAreas
SystemProps["gridTemplateAreas"]
templateColumns
templateColumns
Shorthand prop for gridTemplateColumns
SystemProps["gridTemplateColumns"]
templateRows
templateRows
Shorthand prop for gridTemplateRows
SystemProps["gridTemplateRows"]
GridItem Props
area
area
Shorthand prop for gridArea
SystemProps["gridArea"]
colEnd
colEnd
ResponsiveValue<number | "auto">
colSpan
colSpan
The number of columns the grid item should span
.
ResponsiveValue<number | "auto">
colStart
colStart
The column number the grid item should start.
ResponsiveValue<number | "auto">
rowEnd
rowEnd
ResponsiveValue<number | "auto">
rowSpan
rowSpan
ResponsiveValue<number | "auto">
rowStart
rowStart
ResponsiveValue<number | "auto">