The most powerful and flexible grid system for React
React Rasta is a 12 column grid system built on top of the CSS flexbox layout and styled-components.
Here you will find all you need to get started quickly.
First things first. Install the package react-rasta with yarn or npm.
When using yarn it looks like this.
yarn add react-rastaAnd when using npm it looks like this.
npm install react-rasta --saveReact Rasta depends on the following packages which need to be installed manually.
| Package | Version |
|---|---|
react | 16 or higher |
styled-components | 3 or higher |
import React, {Component} from "react"; import {Column, Container, Row} from "react-rasta"; export default class App extends Component { render() { return ( <Container> <Row> <Column size={3}>Left</Column> <Column size={{xs: 9, md: 3}}>Middle 1</Column> <Column size={{xs: 9, md: 3}}>Middle 2</Column> <Column size={3}>Right</Column> </Row> </Container> ); } }Breakpoints (which will end up in media queries) could be redefined via ThemeProvider.
import React, {Component} from "react"; import {Column, Container, Row, ThemeProvider} from "react-rasta"; const breakpoints = { phone: 0, tablet: 600, desktop: 800, }; const containerWidth = { // do not specify phone here tablet: 560, desktop: 760, }; export default class App extends Component { render() { return ( <ThemeProvider theme={{breakpoints, containerWidth}}> <Container> <Row> <Column size={3}>Left</Column> <Column size={{phone: 9, tablet: 3}}>Middle 1</Column> <Column size={{phone: 9, tablet: 3}}>Middle 2</Column> <Column size={3}>Right</Column> </Row> </Container> </ThemeProvider> ); } }Click here for the documentation.