SimpleGrid

A friendly interface to create responsive grid layouts with ease.

Import

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

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

Usage

Specifying the number of columns for the grid layout.

tsx
<SimpleGrid columns={2} spacing={10}>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

tsx
<SimpleGrid columns={2} spacing={10}>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

You can also make it responsive by passing an object or array value into the columns prop.

tsx
// Passing `columns={[2, null, 3]}` is equivalent to `columns={{base: 2, md: 3}}`
<SimpleGrid columns={[2, null, 3]} spacing="40px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

tsx
// Passing `columns={[2, null, 3]}` is equivalent to `columns={{base: 2, md: 3}}`
<SimpleGrid columns={[2, null, 3]} spacing="40px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

Auto-responsive grid

Use the minChildWidth prop to specify the min-width a child should have, the grid will automatically adjust the number of columns accordingly.

tsx
<SimpleGrid minChildWidth="120px" spacing="40px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

tsx
<SimpleGrid minChildWidth="120px" spacing="40px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

Changing the spacing for columns and rows

Use the spacing prop to change the row and column spacing between the grid items. SimpleGrid also allows you pass spacingX and spacingY props to define the space between columns (X axis) and rows (Y axis) respectively.

tsx
<SimpleGrid columns={2} spacingX="40px" spacingY="20px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

tsx
<SimpleGrid columns={2} spacingX="40px" spacingY="20px">
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
  <Box bg="royalblue" height="80px"></Box>
</SimpleGrid>

Props