react-styled-grid
v3.0.2
Published
A responsive fluid grid system built with styled-components that uses Row and Column approach.
Downloads
13
Maintainers
Readme
react-styled-grid
A responsive fluid grid system built with styled-components that uses Row
and Column
approach. For demo proceed to https://ihenvyr.github.io/react-styled-grid/
Getting Started
npm install react-styled-grid
import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';
const App = () => (
<Row spacer={20}>
<Column medium={4/12}>
<Row>
<Column medium={6/12}><Panel>col</Panel></Column>
<Column medium={6/12}>
<Row>
<Column medium={6/12}><Panel>col</Panel></Column>
<Column medium={6/12}><Panel>col</Panel></Column>
</Row>
</Column>
</Row>
</Column>
<Column medium={4/12}><Panel>col</Panel></Column>
<Column medium={4/12}>
<Row collapse>
<Column medium={3/12}><Panel>col</Panel></Column>
<Column medium={3/12}><Panel>col</Panel></Column>
<Column medium={3/12}><Panel>col</Panel></Column>
<Column medium={3/12}><Panel>col</Panel></Column>
</Row>
</Column>
</Row>
)
export default App
Row
spacer
: (number) margin-top and margin-bottomexpanded
: completely fluid (by default, a row is always 1200 pixels wide)collapse
: remove gutter on all devices
Column
small
: (number) width as a fraction for the small breakpoint and upmedium
: (number) width as a fraction for the medium breakpoint and uplarge
: (number) width as a fraction for the large breakpoint and up
Panel
- It's just helper to properly visualize the column content :)
Theming
React Styled Grid has defaults, but to customize the values,
use styled-components ThemeProvider
component.
import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';
import { ThemeProvider } from 'styled-components';
const App = () => (
<ThemeProvider
theme={{ gutter: 20, medium: 640, large: 1024, maxWidth: 1200 }}>
<Row spacer={20}>
<Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
<Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
<Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
<Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
</Row>
</ThemeProvider>
)
Gutter
All Column components have 10
pixels left and right padding.
To customize the column gutter, pass a number to theme.gutter
with the ThemeProvider component.
Max Width
Outer Row's width which is by default has a value of 1200
pixels.
To customize the outer-most row max-width, pass a number to theme.maxWidth
with the ThemeProvider component.
Breakpoints
Column components use a mobile-first responsive approach,
where any value set works from that breakpoint and wider.
Breakpoints are hard-coded to the following min-widths for medium: 640
and large: 1024
in pixels.
Lower than medium will automatically fallback to small.
To customize the breakpoints, pass a number to theme.medium
and theme.large
with the ThemeProvider component.
MIT License