@webcode.io/react-grid NPM

React Grid

Example usage

import React from "react";
import { GridProvider, Row, Column } from "@webcode.io/react-grid";

const App = () => (
  <GridProvider
    columns={12}
    gutters={24}
    breakpoints={[
      {
        name: "xs",
        minWidth: 0
      },
      {
        name: "sm",
        minWidth: 480
      },
      {
        name: "md",
        minWidth: 768
      },
      {
        name: "lg",
        minWidth: 1024
      }
    ]}
  >
    <header>
      <Row>
        <Column>Header</Column>
      </Row>
    </header>
    <main>
      <Row>
        <Column shape={{ xs: 12, md: 9 }} order={{ xs: 2, md: 1 }}>
          Content
        </Column>
        <Column shape={{ xs: 12, md: 3 }} order={{ xs: 1, md: 2 }}>
          Sidebar
        </Column>
      </Row>
    </main>
    <footer>
      <Row>
        <Column>Footer</Column>
        <Column>
          <Row>
            <Column>Nested Grid</Column>
          </Row>
        </Column>
      </Row>
    </footer>
  </GridProvider>
);