jameslnewell/ styled-components-grid

JavaScript

React

responsive-grid

Need help with styled-components-grid?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jameslnewell

217 Stars

12 Forks

MIT License

65 Commits

17 Opened issues

Description

A responsive grid components for styled-components.

Services available

Need anything else?

Contributors list

James Newell jameslnewell

# 57,156

HTML

React

Shell

Webpack

29 commits

Varya Stepanova varya

# 111,335

CSS

HTML

bem

Storybo...

2 commits

Laurie Jones lauriejones

# 99,471

pattern...

React

Less

HTML

2 commits

Thomas Vogel tomsvogel

# 539,600

CSS

Shell

Symfony

Markdow...

1 commit

Sudheer sudheerDev

# 94,964

matterm...

Redux

React N...

Shell

1 commit

Readme

styled-components-grid

Name: styled-components-grid
Brand: styled-components-grid
SKU: //jameslnewell/styled-components-grid
Rating: 2.2925 (217 reviews)

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