React awesome styled grid
Edit page
Getting StartedUsageTable of propsUtilitiesPlaygroundCustom configurationUsing a custom configurationDefault values

Custom configuration

Using a custom configuration

To use a custom config, import the ThemeProvider from Styled-components import { ThemeProvider } from 'styled-components', and pass a named object awesomegrid to the theme prop, as the example below. The properties of your custom configuration will overwrite the default settings. Just set properties that are different from the default.

To see/edit the code on playground, click on < > icon.

Try changing any property in customConf below and see what happens.

xs=4 sm=5 md=3
xs=4 sm=3 md=9
xs=2 sm=6 md=5 lg=6
xs=2 sm=2 md=7 lg=6

Default values

proptypedefault valuedescription
columnsnumber{ xs: 4 sm: 8, md: 12, lg: 12, xl: 12 }number of columns on grid
gutterWidthnumber{ xs: 1 sm: 1, md: 1.5, lg: 1.5, xl: 1.5}gutter width in rem
paddingWidthnumber{ xs: 1 sm: 1, md: 1.5, lg: 1.5, xl: 1.5}size of outer padding on container in rem
mediaQuerystring'only screen'media type of media query
containershape{ xs: 'full', sm: 'full', md: 'full', lg: 90, xl: 90 }size of containers in rem
breakpointsshape{ xs: 1, sm: 48, md: 64, lg: 90, xl: 120 }breakpoints in rem