jameslnewell

A responsive grid components for styled-components.

214 Stars 12 Forks Last release: Not found MIT License 65 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

styled-components-grid

Name: styled-components-grid
Brand: styled-components-grid
SKU: //jameslnewell/styled-components-grid
Rating: 2.285 (214 reviews)

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


  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.

string

equal to one of

left|right|center|justify|justify-center

OR an

object

where the values are

string

s equal to one of

left|right|center|justify|justify-center

for each desired breakpoint. Defaults to

left

verticalAlign

Controls the vertical alignment of grid units.

string

equal to one of

top|bottom|center|stretch

OR an

object

where the values are

string

s equal to one of

top|bottom|center|stretch

for each desired breakpoint. Defaults to

stretch

reverse

Reverse the order of the grid units.

boolean

OR an

object

where the values are

booleans

s for each desired breakpoint. Defaults to

false

wrap

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

boolean

OR an

object

where the values are

booleans

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

number

between

and

OR a

string

min

max

OR an

object

where the values are a

number

between

and

OR a

string

min

max

for each desired breakpoint.

visible

Controls whether the grid unit is visible.

boolean

OR an

object

where the values are

booleans

s 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
```