styled-components-grid
Responsive grid components for styled-components
💅.
Have a look 👀 at
styled-components-breakpoint
andstyled-components-spacing
which work well with this package.
Installation
yarn add styled-components styled-components-grid
Usage
Using the default breakpoints
;; <Grid> <GridUnit size=1 / 6>Awesome!</GridUnit> <GridUnit size=1 / 3>Amazing!</GridUnit> <GridUnit size= tablet: 1 / 2 desktop: 1 / 4 >Out of this world!</GridUnit></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:
;;; const theme = breakpoints: xs: 0 sm: 576 md: 768 lg: 992 xl: 1200 ; <ThemeProvider theme=theme> <Grid> <GridUnit size=1 / 6>Awesome!</GridUnit> <GridUnit size=1 / 3>Amazing!</GridUnit> <GridUnit size= lg: 1 / 5 >Out of this world!</GridUnit> </Grid></ThemeProvider>;
Using the mixins
;;; const FeaturePanel = styled` `; const Feature = styled` `; <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 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