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

npm npm bundle size (minified + gzip) npm

Responsive grid components for styled-components 💅.

Change log

Have a look 👀 at styled-components-breakpoint and styled-components-spacing which work well with this package.

Installation

yarn add styled-components styled-components-grid

Usage

Examples

Using the default breakpoints

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

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

Using custom breakpoints

You can customise the default breakpoints. If you would like to use the same breakpoints as Bootstrap, you can do so like this:

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

const theme = {
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }
};

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

Using the mixins

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

const FeaturePanel = styled`
  ${grid({})}
`;

const Feature = styled`
  ${grid.unit({ size: { tablet: 1 / 3 } })}
`;

<FeaturePanel>
  <Feature>Awesome!</Feature>
  <Feature>Amazing!</Feature>
  <Feature>Out of this world!</Feature>
</FeaturePanel>;

Components

<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.

wrap

Whether the grid units should wrap across multiple lines or a single line.

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

component

The component to render the styles on.

Optional. A string or valid React component. Defaults to div.

<Grid.Unit/>

size

Controls the width of the grid unit.

A number between 0 and 1 OR a string of min or max OR an object where the values are a number between 0 and 1 OR a string of min or max for each desired breakpoint.

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.

component

The component to render the styles on.

Optional. A string or valid React component. Defaults to div.

Mixins

grid(opts)

Apply grid styles.

halign
valign
wrap
reverse

grid.unit(opts)

Apply grid unit styles.

size
visible