react-grid-simple

react-grid-simple

Based on Bootstrap 3 Grid System

Made this because I got tired of looking at divs everywhere and looking for classNames.

Install

npm install react-simple-grid --save

Make sure to import the styles for the grid system. It is essentially just Bootstraps grid system. So if you have bootstrap already on your project you don't need the css from react-grid-simple.

<link rel="stylesheet" href="/node_modules/react-grid-simple/src/css/grid.min.css">

Usage

import React from 'react';
import { render } from 'react-dom';
import { Container, Row, Col } from 'react-grid-simple';

function App (props) {
  return (
    <Container fluid={true}>
      <Row>
        <Col xs={3} sm={3} lg={5} md={9}>
          <p>Waddup</p>
        </Col>
        <Col xs={2} sm={3} lg={1} md={1}>
          <p>Whats Poppin</p>
        </Col>
        <Col xs={2} sm={3} lg={5} md={1}>
          <p>Gangsta Grillz</p>
        </Col>
        <Col xs={5} sm={3} lg={1} md={1}>
          <p>Pimpin</p>
        </Col>
      </Row>
    </Container>
  );
}

render(<App />, document.getElementById('app'));

License

MIT