You are looking at the documentation of the work in progress Hope UI 1.0, examples and information may be broken or outdated.

Layout

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.

Header

Nav

Main

Footer

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

NameTypeDescription
autoFlowResponsiveValue<Property.GridAutoFlow>Shorthand prop for gridAutoFlow.
autoColumnsResponsiveValue<Property.GridAutoColumns>Shorthand prop for gridAutoColumns.
autoRowsResponsiveValue<Property.GridAutoRows>Shorthand prop for gridAutoRows.
templateAreasResponsiveValue<Property.GridTemplateAreas>Shorthand prop for gridTemplateAreas.
templateColumnsResponsiveValue<Property.GridTemplateColumns>Shorthand prop for gridTemplateColumns.
templateRowsResponsiveValue<Property.GridTemplateRows>Shorthand prop for gridTemplateRows.

Grid.Item

NameTypeDescription
area ResponsiveValue<Property.GridArea>Shorthand prop for gridArea.
colSpanResponsiveValue<number | "auto">The number of columns the grid item should span.
colStartResponsiveValue<number | "auto">The column number the grid item should start.
colEndResponsiveValue<number | "auto">The column number the grid item should end.
rowSpanResponsiveValue<number | "auto">The number of rows the grid item should span.
rowStartResponsiveValue<number | "auto">The row number the grid item should start.
rowEndResponsiveValue<number | "auto">The row number the grid item should end.
Previous
Flex