Package Exports

styled-components-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-components-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

styled-components-grid

Responsive grid components for styled-components.

Installation

npm install --save styled-components styled-components-grid

Usage

Using the default breakpoints

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

<Grid>
  <Grid.Unit width={1/6}>Awesome!</Grid.Unit>
  <Grid.Unit width={1/3}>Amazing!</Grid.Unit>
  <Grid.Unit width={{mobile: 1, tablet: 1/2, desktop: 1/4}}>Out of this world!</Grid.Unit>
</Grid>

Using custom breakpoints

import React from 'react';
import {ThemeProvider} from 'styled-components';
import Grid from 'styled-components-grid';

const theme = {
  breakpoints: {
    sm: 0,
    md: 800,
    lg: 1200
  }
};

<ThemeProvider theme={theme}>
  <Grid>
    <Grid.Unit width={1/6}>Awesome!</Grid.Unit>
    <Grid.Unit width={1/3}>Amazing!</Grid.Unit>
    <Grid.Unit width={{sm: 1, lg: 1/5}}>Out of this world!</Grid.Unit>
  </Grid>
</ThemeProvider>

API

<Grid/>

horizontalAlign

Controls the horizontal alignment of grid units.

verticalAlign

Controls the vertical alignment of grid units.

reverse

Reverse the order of the grid units.

A boolean OR an object where the values are booleanss for each desired breakpoint. Defaults to false.

<Grid.Unit/>

width

Controls the width of the grid unit.

A number OR an object where the values are numbers for each desired breakpoint. Defaults to true.

visible

Controls whether the grid unit is visible.

A boolean OR an object where the values are booleanss for each desired breakpoint. Defaults to true.