Emotion grid
Edit page
Getting StartedAPIUsageResponsiveColumn offsetAlignmentReverseNestingRemove guttersUtilities
Changelog
Table of props

Responsive

You can create a responsive grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row.

Column offset

Alignment

Align and justify working with flexbox and both accept a string or object.

Vertical

Props accepted: baseline | center | flex-start | flex-end | stretch.

Horizontal

Props accepted: center | flex-end | flex-start | space-around | space-between.

Reverse

Receives a boolean or array, if you pass just the boolean all breakpoints will be reversed.

Nesting

To nest your content with the default grid, add a new <Row> and set of Columns(Col).

Remove gutters

Remove gutters from columns