Repository files navigation

Responsive grid components forstyled-components 💅.

Change log

Have a look 👀 atstyled-components-breakpoint andstyled-components-spacing which work well with this package.

yarn add styled-components styled-components-grid

Examples

importReactfrom'react';importGridfrom'styled-components-grid';<Grid><Grid.Unitsize={1/6}>Awesome!</Grid.Unit><Grid.Unitsize={1/3}>Amazing!</Grid.Unit><Grid.Unitsize={{tablet:1/2,desktop:1/4}}>Out of this world!</Grid.Unit></Grid>;

You can customise the default breakpoints. If you would like to use the same breakpoints asBootstrap, you can do so like this:

importReactfrom'react';import{ThemeProvider}from'styled-components';importGridfrom'styled-components-grid';consttheme={breakpoints:{xs:0,sm:576,md:768,lg:992,xl:1200}};<ThemeProvidertheme={theme}><Grid><Grid.Unitsize={1/6}>Awesome!</Grid.Unit><Grid.Unitsize={1/3}>Amazing!</Grid.Unit><Grid.Unitsize={{lg:1/5}}>Out of this world!</Grid.Unit></Grid></ThemeProvider>;

importReactfrom'react';importstyledfrom'styled-components';import{grid}from'styled-components-grid';constFeaturePanel=styled`${grid({})}`;constFeature=styled`${grid.unit({size:{tablet:1/3}})}`;<FeaturePanel><Feature>Awesome!</Feature><Feature>Amazing!</Feature><Feature>Out of this world!</Feature></FeaturePanel>;

Controls the horizontal alignment of grid units.

Astring equal to one ofleft|right|center|justify|justify-center OR anobject where the values arestrings equal to one ofleft|right|center|justify|justify-center for each desired breakpoint. Defaults toleft.

Controls the vertical alignment of grid units.

Astring equal to one oftop|bottom|center|stretch OR anobject where the values arestrings equal to one oftop|bottom|center|stretch for each desired breakpoint. Defaults tostretch.

Reverse the order of the grid units.

Aboolean OR anobject where the values arebooleanss for each desired breakpoint. Defaults tofalse.

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

Aboolean OR anobject where the values arebooleanss for each desired breakpoint. Defaults totrue.

The component to render the styles on.

Optional. Astring or valid React component. Defaults todiv.

Controls the width of the grid unit.

Anumber between0 and1 OR astring ofmin ormax OR anobject where the values are anumber between0 and1 OR astring ofmin ormax for each desired breakpoint.

Controls whether the grid unit is visible.

Aboolean OR anobject where the values arebooleanss for each desired breakpoint. Defaults totrue.

The component to render the styles on.

Optional. Astring or valid React component. Defaults todiv.

Apply grid styles.

• halign
• valign
• wrap
• reverse

Apply grid unit styles.

• size
• visible