@webcode.io/react-grid

React flexbox grid system built with styled components.

Usage no npm install needed!

<script type="module">
  import webcodeIoReactGrid from 'https://cdn.skypack.dev/@webcode.io/react-grid';
</script>

README

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 }