Emotion grid
Edit page
Getting StartedAPIDefault valuesCustom configUsageUtilitiesTable of props

API

Default values

With exception the media query that use rem unit.

typeExtra small (xs)Small (sm)Medium (md)Larger (lg)Extra large (xl)
Containershape'full''full'456071.25
Paddingnumber1.8751.8751.8751.8751.875
Columnsnumber48121212
Gutternumber1.8751.8751.8751.8751.875
Breakpointsnumber133.75486471.25

debug

You can use only rgb color

typedefaultdescription
debugstring'#0470F5'Color of grid on debug mode

Custom config

To set your custom config, you need to import the ThemeProvider from emotion theming', and pass a named object grid to the theme prop, as the example below:

import { ThemeProvider } from 'emotion-theming';

Try to change the config in playground:

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