Grid

A CSS grid layout container.

Import

ts
import { Grid } from "@hope-ui/core";

ts
import { Grid } from "@hope-ui/core";

• Grid: A Box with display: grid.
• Grid.Item: A Box used to control the span and start position within a grid.

Usage

The example below demonstrate usage of the templateColumns prop and applying a gap (space) between the grid items.

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

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

Spanning columns

On the Grid.Item component, use the colSpan prop to span across columns and rowSpan to span across rows. You will also need to specify the templateColumns and templateRows props on the Grid itself.

tsx
<Grid h="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap={4}>
  <Grid.Item rowSpan={2} colSpan={1} bg="royalblue" />
  <Grid.Item colSpan={2} bg="lightskyblue" />
  <Grid.Item colSpan={2} bg="lightskyblue" />
  <Grid.Item colSpan={4} bg="royalblue" />
</Grid>

tsx
<Grid h="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap={4}>
  <Grid.Item rowSpan={2} colSpan={1} bg="royalblue" />
  <Grid.Item colSpan={2} bg="lightskyblue" />
  <Grid.Item colSpan={2} bg="lightskyblue" />
  <Grid.Item colSpan={4} bg="royalblue" />
</Grid>

Starting and ending columns

Use the colStart and colEnd prop on Grid.Item to make an element start or end at the desired grid position.

tsx
<Grid templateColumns="repeat(5, 1fr)" gap={4}>
  <Grid.Item colSpan={2} h={10} bg="royalblue" />
  <Grid.Item colStart={4} colEnd={6} h={10} bg="lightskyblue" />
</Grid>

tsx
<Grid templateColumns="repeat(5, 1fr)" gap={4}>
  <Grid.Item colSpan={2} h={10} bg="royalblue" />
  <Grid.Item colStart={4} colEnd={6} h={10} bg="lightskyblue" />
</Grid>

Template areas

The templateAreas prop specifies areas within the grid layout. Use template literals to name the area, then you can reference areas by passing the area prop to Grid.Item.

tsx
<Grid
  templateAreas={`"header header"
                  "nav main"
                  "nav footer"`}
  gridTemplateRows="50px 1fr 30px"
  gridTemplateColumns="150px 1fr"
  h="200px"
  gap={1}
  color="black"
>
  <Grid.Item pl={2} bg="coral" area="header">
    Header
  </Grid.Item>
  <Grid.Item pl={2} bg="lightpink" area="nav">
    Nav
  </Grid.Item>
  <Grid.Item pl={2} bg="mediumseagreen" area="main">
    Main
  </Grid.Item>
  <Grid.Item pl={2} bg="dodgerblue" area="footer">
    Footer
  </Grid.Item>
</Grid>

tsx
<Grid
  templateAreas={`"header header"
                  "nav main"
                  "nav footer"`}
  gridTemplateRows="50px 1fr 30px"
  gridTemplateColumns="150px 1fr"
  h="200px"
  gap={1}
  color="black"
>
  <Grid.Item pl={2} bg="coral" area="header">
    Header
  </Grid.Item>
  <Grid.Item pl={2} bg="lightpink" area="nav">
    Nav
  </Grid.Item>
  <Grid.Item pl={2} bg="mediumseagreen" area="main">
    Main
  </Grid.Item>
  <Grid.Item pl={2} bg="dodgerblue" area="footer">
    Footer
  </Grid.Item>
</Grid>

Props

Grid

Grid.Item