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
222 Stars 13 Forks MIT License 65 Commits 22 Opened issues

Description

A responsive grid components for styled-components.

Services available

!
?

Need anything else?

Contributors list

# 58,214
TypeScr...
React
Webpack
PHP
29 commits
# 114,127
HTML
bem
TypeScr...
Storybo...
2 commits
# 104,024
pattern...
React
TypeScr...
Less
2 commits
# 522,485
Shell
Symfony
PHP
Markdow...
1 commit
# 109,464
matterm...
Redux
Shell
TypeScr...
1 commit

styled-components-grid

npm npm bundle size (minified + gzip) npm Build Status

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

A

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.

A

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.

A

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.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.