---

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.

Getting Started

Here you will find all you need to get started quickly.

Install Package

First things first. Install the package react-rasta with yarn or npm.

When using yarn it looks like this.

yarn add react-rasta

And when using npm it looks like this.

npm install react-rasta --save

Required Dependencies

React Rasta depends on the following packages which need to be installed manually.

Package	Version
react	16 or higher
styled-components	3 or higher

Code Examples

importReact,{Component}from"react";import{Column,Container,Row}from"react-rasta";exportdefaultclassAppextendsComponent{render(){return(<Container><Row><Columnsize={3}>Left</Column><Columnsize={{xs: 9,md: 3}}>Middle 1</Column><Columnsize={{xs: 9,md: 3}}>Middle 2</Column><Columnsize={3}>Right</Column></Row></Container>);}}

Breakpoints (which will end up in media queries) could be redefined via ThemeProvider.

importReact,{Component}from"react";import{Column,Container,Row,ThemeProvider}from"react-rasta";constbreakpoints={phone: 0,tablet: 600,desktop: 800,};constcontainerWidth={// do not specify phone heretablet: 560,desktop: 760,};exportdefaultclassAppextendsComponent{render(){return(<ThemeProvidertheme={{breakpoints, containerWidth}}><Container><Row><Columnsize={3}>Left</Column><Columnsize={{phone: 9,tablet: 3}}>Middle 1</Column><Columnsize={{phone: 9,tablet: 3}}>Middle 2</Column><Columnsize={3}>Right</Column></Row></Container></ThemeProvider>);}}

Documentation

Click here for the documentation.