React CSS Grid

A grid for React projects, based on CSS Grid Layout.

Quick Start

Installation

$ yarn add @trbl/react-css-grid

Composition

  import React from 'react';
  import { GridProvider, Grid, Cell } from '@trbl/react-css-grid';

  const App = () => {
    return (
      <GridProvider
        hCount={12}
        hGap="columnWidth"
        vGap="10px"
        breakpoints={{
          xs: 350,
          s: 576,
          m: 768,
          l: 992,
          xl: 1200,
        }}
      >
        <Grid>
          <Cell hSpan={6}>
            ...
          </Cell>
          <Cell
            hSpan={10}
            hStart={2}
            hSpanL={12}
            hStartL={1}
            hSpanS={6}
          >
            <Grid>
              <Cell
                hSpan={5}
                hSpanL={6}
              >
                ...
              </Cell>
              <Cell
                hSpan={5}
                hSpanL={6}
              >
                ...
              </Cell>
            </Grid>
          </Cell>
        </Grid>
      </GridProvider>
    )
  }

Demo

To demo locally, clone the repo and

$ yarn
$ yarn dev
$ open http://localhost:3000

Documentation

All available props can be found via the references below:

• Cell
• Grid
• Grid Provider

Contribution

Help us, or let us help you help us.

License

MIT Copyright (c) TRBL, LLC