https://github.com/ihenvyr/react-styled-grid
A responsive fluid grid system built with styled-components that uses Row and Column approach
https://github.com/ihenvyr/react-styled-grid
fluid-grid grid-system react responsive-grid styled-components
Last synced: 8 months ago
JSON representation
A responsive fluid grid system built with styled-components that uses Row and Column approach
- Host: GitHub
- URL: https://github.com/ihenvyr/react-styled-grid
- Owner: ihenvyr
- License: mit
- Created: 2017-03-06T10:55:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T03:19:31.000Z (over 3 years ago)
- Last Synced: 2025-01-18T08:45:48.213Z (over 1 year ago)
- Topics: fluid-grid, grid-system, react, responsive-grid, styled-components
- Language: JavaScript
- Homepage: https://ihenvyr.github.io/react-styled-grid/
- Size: 2.5 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-styled-grid
A responsive fluid grid system built with [styled-components](https://github.com/styled-components/styled-components) that uses `Row` and `Column` approach. For demo proceed to https://ihenvyr.github.io/react-styled-grid/
## Getting Started
```sh
npm install react-styled-grid
```
```js
import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';
const App = () => (
col
col
col
col
col
col
col
col
)
export default App
```
## Row
- `spacer`: (number) margin-top and margin-bottom
- `expanded`: 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 up
- `medium`: (number) width as a fraction for the medium breakpoint and up
- `large`: (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.
```js
import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';
import { ThemeProvider } from 'styled-components';
const App = () => (
Column
Column
Column
Column
)
```
### 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