styled-grid
Responsive React grid system built with styled-components
Getting Started
const App = <div> <Grid sm=1/2> Half width </Grid> <Grid sm=1/2> Half width </Grid> </div>
Props
xs
: (number) width as a fraction for all breakpointssm
: (number) width as a fraction for the small breakpoint and upmd
: (number) width as a fraction for the medium breakpoint and uplg
: (number) width as a fraction for the large breakpoint and up
Breakpoints
Grid components use a mobile-first responsive approach, where any value set works from that breakpoint and wider.
Breakpoints are hard-coded to the following min-widths: 40em
, 52em
, 64em
.
Gutter
All Grid components have 32px left and right padding.
Components
In addition to the Grid
component, styled-grid exports these other primitive helper components:
Half
- Grid component that goes half width at the small breakpointThird
- Grid component that goes one-third width at the small breakpointQuarter
- Grid component that goes one-quart width at the medium breakpoint
MIT License