A responsive grid components for styled-components.
Responsive grid components for
styled-components💅.
styled-components-breakpointandstyled-components-spacingwhich work well with this package.
yarn add styled-components styled-components-grid
import React from 'react'; import Grid from 'styled-components-grid'; Awesome! Amazing! Out of this world! ;
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! ;
import React from 'react'; import styled from 'styled-components'; import { grid } from 'styled-components-grid';const FeaturePanel = styled
${grid({})}
;const Feature = styled
Awesome! Amazing! Out of this world! ;${grid.unit({ size: { tablet: 1 / 3 } })}
;
Controls the horizontal alignment of grid units.
A
stringequal to one of
left|right|center|justify|justify-centerOR an
objectwhere the values are
strings equal to one of
left|right|center|justify|justify-centerfor each desired breakpoint. Defaults to
left.
Controls the vertical alignment of grid units.
A
stringequal to one of
top|bottom|center|stretchOR an
objectwhere the values are
strings equal to one of
top|bottom|center|stretchfor each desired breakpoint. Defaults to
stretch.
Reverse the order of the grid units.
A
booleanOR an
objectwhere the values are
booleanss for each desired breakpoint. Defaults to
false.
Whether the grid units should wrap across multiple lines or a single line.
A
booleanOR an
objectwhere the values are
booleanss for each desired breakpoint. Defaults to
true.
The component to render the styles on.
Optional. A
stringor valid React component. Defaults to
div.
Controls the width of the grid unit.
A
numberbetween
0and
1OR a
stringof
minor
maxOR an
objectwhere the values are a
numberbetween
0and
1OR a
stringof
minor
maxfor each desired breakpoint.
Controls whether the grid unit is visible.
A
booleanOR an
objectwhere the values are
booleanss for each desired breakpoint. Defaults to
true.
The component to render the styles on.
Optional. A
stringor valid React component. Defaults to
div.
Apply grid styles.
halign
valign
wrap
reverse
Apply grid unit styles.
size
visible