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>
);

Context Properties

| Property | Default | | ----------- | --------------------------------------------------------------------------------------------------------------------------- | | column | 12 | | gutters | 24 | | breakPoints | [{ name: "xs", minWidth: 0 }, { name: "sm", minWidth: 480 }, { name: "md", minWidth: 768 }, { name: "lg", minWidth: 1024 }] |

Row Properties

| Property | Default | | -------------- | ------- | | flexDirection | row | | flexWrap | wrap | | justifyContent | normal | | alignItems | normal | | alignContent | normal |

Column Properties

| Property | Default | | -------- | ---------- | | shape | { xs: 12 } | | order | { xs: 1 } |