Shorthand prop for gridArea
@deprecated Use GridItem
with the area
prop instead. Will be removed in a future
version.
Grid
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}><GridItem w='100%' h='10' bg='blue.500' /><GridItem w='100%' h='10' bg='blue.500' /><GridItem w='100%' h='10' bg='blue.500' /><GridItem w='100%' h='10' bg='blue.500' /><GridItem 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
.
<Gridh='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>
Props#
Grid Props#
Grid composes Box
so you can pass all the Box
prop, and these shorthand prop
to save you some time:
area
area
SystemProps["gridArea"]
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">