Components
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
import { Grid } from '@outfitio/outkit';
Usage
Using the Grid components, here are some helpful shorthand props:
| Verbose Prop | Shorthand Prop |
|---|---|
gridArea | area |
gridTemplateAreas | templateAreas |
gridGap | gap |
gridRowGap | rowGap |
gridColumnGap | columnGap |
gridAutoColumns | autoColumns |
gridColumn | column |
gridRow | row |
gridAutoFlow | autoFlow |
gridAutoRows | autoRows |
gridTemplateRows | templateRows |
gridTemplateColumns | templateColumns |
While you can pass the verbose props, using the shorthand can save you some time.
Props
Grid composes Box so you can pass all the Box prop and related css grid props.