Socket
Socket
Sign inDemoInstall

styled-components-grid

Package Overview
Dependencies
4
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-components-grid

Responsive grid components for `styled-components` 💅.


Version published
Maintainers
1
Created

Changelog

Source

2.2.2

  • bumped support of styled-components (#20)

Readme

Source

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

<Grid>
  <Grid.Unit size={1 / 6}>Awesome!</Grid.Unit>
  <Grid.Unit size={1 / 3}>Amazing!</Grid.Unit>
  <Grid.Unit size={{ tablet: 1 / 2, desktop: 1 / 4 }}>Out of this world!</Grid.Unit>
</Grid>;

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

<ThemeProvider theme={theme}>
  <Grid>
    <Grid.Unit size={1 / 6}>Awesome!</Grid.Unit>
    <Grid.Unit size={1 / 3}>Amazing!</Grid.Unit>
    <Grid.Unit size={{ lg: 1 / 5 }}>Out of this world!</Grid.Unit>
  </Grid>
</ThemeProvider>;

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

<FeaturePanel>
  <Feature>Awesome!</Feature>
  <Feature>Amazing!</Feature>
  <Feature>Out of this world!</Feature>
</FeaturePanel>;

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

Keywords

FAQs

Last updated on 30 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc