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
'@blockstack/ui'
;

Usage

Using the Flex 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.

Preview
Editable example
On this page