styled-grid

Responsive React grid system built with styled-components

Getting Started

import React from 'react'
import Grid from 'styled-grid'

const App = () => (
  <div>
    <Grid sm={1/2}>
      Half width
    </Grid>
    <Grid sm={1/2}>
      Half width
    </Grid>
  </div>
)

export default App

Props

• xs: (number) width as a fraction for all breakpoints
• sm: (number) width as a fraction for the small breakpoint and up
• md: (number) width as a fraction for the medium breakpoint and up
• lg: (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:

import { Half, Third, Quarter } from 'styled-grid'

• Half - Grid component that goes half width at the small breakpoint
• Third - Grid component that goes one-third width at the small breakpoint
• Quarter - Grid component that goes one-quart width at the medium breakpoint

MIT License