Back to Components

Grid

A use case driven grid system (using display: grid;) for auto flowing, flexible and fixed column layouts.

<Grid>

PropertyTypeDefaultEditor
alignChildren

OneOf

"middle"
columnAutoFit

Automatically try to fit as many columns on a row as possible. This must be used with `columnWidth` and cannot be used with `columnCount`.

Boolean

columnCount

An explicit number of columns to place on each row. This can be used with `columnWidth`, otherwise the minimum content size is used. This cannot be used with columnAutoFit.

Number

columnWidth

An explicit width of the columns.

String

gutter

Spacing applied between child grid items, values are global spacing variables.

OneOf

<GridItem>

PropertyTypeDefaultEditor
column

Specifies a specific column this item should be in.

Number

row

Specifies a specific row this item should be in.

Number