Short hand prop for gridArea
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}><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
.
<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>
<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>
<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
Short hand prop for gridAutoColumns
SystemProps["gridAutoColumns"]
autoFlow
autoFlow
Short hand prop for gridAutoFlow
SystemProps["gridAutoFlow"]
autoRows
autoRows
Short hand prop for gridAutoRows
SystemProps["gridAutoRows"]
column
column
Short hand prop for gridColumn
SystemProps["gridColumn"]
columnGap
columnGap
Short hand prop for gridColumnGap
SystemProps["gridColumnGap"]
gap
gap
Short hand prop for gridGap
SystemProps["gridGap"]
row
row
Short hand prop for gridRow
SystemProps["gridRow"]
rowGap
rowGap
Short hand prop for gridRowGap
SystemProps["gridRowGap"]
templateAreas
templateAreas
Short hand prop for gridTemplateAreas
SystemProps["gridTemplateAreas"]
templateColumns
templateColumns
Short hand prop for gridTemplateColumns
SystemProps["gridTemplateColumns"]
templateRows
templateRows
Short hand prop for gridTemplateRows
SystemProps["gridTemplateRows"]
GridItem Props#
colEnd
colEnd
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, 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
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>
rowSpan
rowSpan
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>
rowStart
rowStart
number | "auto" | ResponsiveArray<number | "auto"> | Partial<Record<string, number | "auto">>
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web