react-simple-styled-grid
v1.1.0
Published
React simple styled components grid
Downloads
13
Readme
ReactSimpleStyledGrid
A simple responsive grid for React using styled-components
Installation
npm i --save react-simple-styled-grid
Dependencies
npm i --save styled-components
Demo
https://lluiscornejo.github.io/react-simple-styled-grid/index.html
Basic usage
import { Container, Row, Col } from 'react-simple-styled-grid';
<Container>
<Row as="section">
<Col small={4} medium={6} large={8}>
Col 1
</Col>
<Col small={8} medium={6} large={4}>
Col 2
</Col>
</Row>
<Row>
<Col small={7} medium={3} large={4}>
Col 3
</Col>
<Col small={5} medium={6} large={5}>
Col 4
</Col>
<Col medium={3} large={3}>
Col 5
</Col>
</Row>
</Container>
Custom configuration
import { ThemeProvider } from 'styled-components';
import { Container, Row, Col } from 'react-simple-styled-grid';
const config = {
simpleGrid: {
containerMaxWith: 1200,
gutter: 20,
gutterSmall: 10,
maxColNumber: 12,
screen: {
small: 640,
medium: 997,
large: 1024,
},
},
};
<ThemeProvider theme={config}>
<Container>
<Row as="section">
<Col small={4} medium={6} large={8}>
Col 1
</Col>
<Col small={8} medium={6} large={4}>
Col 2
</Col>
</Row>
<Row>
<Col small={7} medium={3} large={4}>
Col 3
</Col>
<Col small={5} medium={6} large={5}>
Col 4
</Col>
<Col medium={3} large={3}>
Col 5
</Col>
</Row>
</Container>
</ThemeProvider>
Default Configuration
const config = {
simpleGrid: {
containerMaxWith: 1180,
gutter: 20,
gutterSmall: 20,
maxColNumber: 12,
screen: {
small: 640,
medium: 997,
large: 1024,
},
},
};