styled-components-grid

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';


  Awesome!
  Amazing!
  Out of this world!
;

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
  }
};

  
    Awesome!
    Amazing!
    Out of this world!
  
;

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 } })};

  Awesome!
  Amazing!
  Out of this world!
;

Components

<Grid/>

horizontalAlign

Controls the horizontal alignment of grid units.

A

string

left|right|center|justify|justify-center

object

string

left|right|center|justify|justify-center

left

verticalAlign

Controls the vertical alignment of grid units.

A

string

top|bottom|center|stretch

object

string

top|bottom|center|stretch

stretch

reverse

Reverse the order of the grid units.

A

boolean

object

booleans

false

wrap

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

A

boolean

object

booleans

true

component

The component to render the styles on.

Optional. A

string

div

<Grid.Unit/>

size

Controls the width of the grid unit.

A

number

0

1

string

min

max

object

number

0

1

string

min

max

visible

Controls whether the grid unit is visible.

A

boolean

object

booleans

true

component

The component to render the styles on.

Optional. A

string

div

Mixins

grid(opts)

Apply grid styles.

• halign

• valign

• wrap

• reverse

grid.unit(opts)

Apply grid unit styles.

• size

• visible