ls-react-grid

React implementation of grid system based on flex css property, styled-components and bootstrap grid syntax.

Like Bootstrap, React Grid system uses a series of containers, rows, and columns to layout and align content. It is built with styled-components and flexbox and is fully responsive.

LS React Grid does not come with styled-components to prevent known issue #several instances of styled-components and because of that it is required to have library in your local node_modules.

Install

npm install --save [email protected]

npm install --save ls-react-grid

Usage

import React, { Component } from 'react'

import { Container, Row, Column } from 'ls-react-grid'

class Example extends Component {
  render () {
    return (
      <Container>
        <Row>
          <Column>
            <h1>Hello ls-react-grid</h1>
          </Column>
        </Row>
      </Container>
    )
  }
}

Demo

See what you can do with this package here.

Component Documentation

• Container
• Row
• Column

Change Log

v0.2.0

• Added Component initial documentation.
• Fixed column hidden logic for all media breakpoints.
• Renamed column property noGutter to noPadding.
• Instead of creating fixed column size using following syntax <Column fixed style={{ width: 200 }}></Column> you can use shorthand syntax <Column fixed width="200px"></Column>. Note: It is required to explicitly say what unit is used for width.

License

MIT © stefanlazarevic @ lazarevicstefan.com