Emotion grid
Edit page
Getting StartedAPIUsageResponsiveColumn offsetAlignmentReverseNestingRemove guttersUtilitiesTable 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.

Col auto
sm-4 md-4 lg-6
sm-4 md-8 lg-6
sm-2 md-3 lg-4
sm-2 md-3 lg-2
sm-2 md-3 lg-4
sm-2 md-3 lg-2

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.

start
start

lg-end xl-center
lg-end xl-center

lg-center xl-end
lg-center xl-end

Horizontal

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

space around
space around
space around

lg-end xl-center
lg-end xl-center
lg-end xl-center

lg start xl-between
lg start xl-between
lg start xl-between

Reverse

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

Col-sm-2 Col-lg-4
Col-sm-2 Col-lg-4

Nesting

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

Col-sm-8 Col-lg-12
Col-sm-4 Col-lg-6
Col-sm-4 Col-lg-6

Remove gutters

Remove gutters from columns

sm-4 md-4 lg-6
sm-4 md-8 lg-6
sm-2 md-3 lg-4
sm-2 md-3 lg-2
sm-2 md-3 lg-4
sm-2 md-3 lg-2