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
Gridto 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>
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.
<GridtemplateAreas={`"header header""nav main""nav footer"`}gridTemplateRows={'50px 1fr 30px'}gridTemplateColumns={'150px 1fr'}h='200px'gap='1'color='blackAlpha.700'fontWeight='bold'><GridItem ps='2' bg='orange.300' area={'header'}>Header</GridItem><GridItem ps='2' bg='pink.300' area={'nav'}>Nav</GridItem><GridItem ps='2' bg='green.300' area={'main'}>Main</GridItem><GridItem ps='2' bg='blue.300' area={'footer'}>Footer</GridItem></Grid>