If you're like me, I tend to always check the MDN docs for anything css grid.
SimpleGrid provides a friendly interface to create responsive grid layouts with
ease. It renders a
div element with
Specifying the number of columns for the grid layout.
You can also make it responsive by passing array or object values into the
To make the grid responsive adjust automatically without passing
simply pass the
minChildWidth prop to specify the
min-width a child should
have before adjusting the layout.
This uses css grid
Changing the spacing for columns and rows#
Simply pass the
spacing prop to change the row and column spacing between the
SimpleGrid also allows you pass
define the space between columns and rows respectively.
Box so you can pass all the
Box props and css grid props
with addition of these:
|The number of columns|
|The gap between the grid items|
|The column gap between the grid items|
|The row gap between the grid items|
|The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo