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: about 20 hours 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 (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T03:19:31.000Z (about 2 years ago)
• Last Synced: 2025-01-18T08:45:48.213Z (14 days 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