@happyfresh/grid

Grid

Grid based on the flex display property. Grid packages consists of Container, Row, and Column. This grid system support responsive divs based on 3 breakpoints: mobile (width < 768px), tablet (768 > width < 992), and desktop (width > 992). You can also insert styles props if you want to override current css.

source: http://flexboxgrid.com/ with a few modification.

Installation

yarn add @happyfresh/grid

Usage

import { Container, Column, Row } from '@happyfresh/grid';

export const Example = () => (
  <React.Fragment>
    <Container fluid styles={{backgroundColor: 'black'}}>
      <Row styles={{backgroundColor: 'white'}}>
        <Column sm={12} md={6} lg={3}>
          <Row>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
          </Row>
        </Column>
        <Column reverse sm={12} md={6} lg={3}>
          <Row className='center-sm start-md end-lg'>Another text2.</Row>
          <Row>Another text3.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
      </Row>
    </Container>
    <Container fluid>
      <Row>
        Another short text.
      </Row>
    </Container>
  </React.Fragment>
)