styled-components-grid

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

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.