SimpleGrid
SimpleGrid provides a friendly interface to create responsive grid layouts with ease.
Import
import { SimpleGrid } from '@hover/blueprint'
Usage
Specifying the number of columns for the grid layout.
<SimpleGrid columns={2} spacing={10}> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box></SimpleGrid>
You can also make it responsive by passing array or object values into the
columns prop.
// Passing `columns={[2, null, 3]}` and `columns={{sm: 2, md: 3}}`// will have the same effect.<SimpleGrid columns={[2, null, 3]} spacing='40px'> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box></SimpleGrid>
Auto-responsive grid
To make the grid responsive and adjust automatically without passing columns,
simply pass the minChildWidth prop to specify the min-width a child should
have before adjusting the layout.
This uses css grid auto-fit and minmax() internally.
<SimpleGrid minChildWidth='120px' spacing='40px'> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box></SimpleGrid>
Changing the spacing for columns and rows
Simply pass the spacing prop to change the row and column spacing between the
grid items. SimpleGrid also allows you pass spacingX and spacingY to
define the space between columns and rows respectively.
<SimpleGrid columns={2} spacingX='40px' spacingY='20px'> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box> <Box bg='tomato' height='80px'></Box></SimpleGrid>