Grid

A primitive useful for grid layouts. Grid is Box with display: grid and comes with helpful style shorthand. It renders a div element.

Import#

Usage#

Using the Grid components, here are some helpful shorthand props:

Verbose PropShorthand Prop
gridAreaarea
gridTemplateAreastemplateAreas
gridGapgap
gridRowGaprowGap
gridColumnGapcolumnGap
gridAutoColumnsautoColumns
gridColumncolumn
gridRowrow
gridAutoFlowautoFlow
gridAutoRowsautoRows
gridTemplateRowstemplateRows
gridTemplateColumnstemplateColumns

While you can pass the verbose props, using the shorthand can save you some time.

Editable Example

Props#

Grid composes Box so you can pass all the Box prop and related css grid props.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo