#Grid Setup

#Installation

yarn add @faceless-ui/css-grid

First, wrap your app with the provider. This component does not render anything and should be nearest to the top of your app as possible. This is where the global settings are defined.

import { GridProvider } from '@faceless-ui/css-grid';

export const MyApp = () => {
  return (
    <GridProvider
      breakpoints={{
        s: 768,
        m: 1279,
        l: 1679
      }}
      rowGap={{
        s: '1rem',
        m: '1rem',
        l: '4rem',
        xl: '4rem',
      }}
      colGap={{
        s: '10px',
        m: '10px',
        l: '4rem',
        xl: '4rem',
      }}
      cols={{
        s: 8,
        m: 8,
        l: 14,
        xl: 16,
      }}
    >
      ...
    </GridProvider>
  )
}

Now you can begin building layouts using the <Grid> and <Cell> components. Every <Cell> must be a direct descendant of a <Grid>. You can also nest grids.

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

export const MyComponent = () => {
  return (
    <Grid>
      <Cell
        cols={7}
        colsM={8}
      >
        <div>
          9 columns on desktop, full width on mobile
        </div>
      </Cell>
      <Cell
        cols={7}
        colsM={8}
      >
        <div>
          5 columns on desktop, full width on mobile
        </div>
      </Cell>
    </Grid>
  )
}

#Nested grids

Grids are easily nested. To do this, render a <Grid> component as a descendant of any <Cell>. Remember that number of columns reduce at each nesting, depending on the props of the collective cells before it.

import React from 'react';
import { Grid } from '@faceless-ui/css-grid';

export const MyComponent = () => {
  return (
    <Grid>
      <Cell
        cols={8}
        colsM={8}
      >
        <div>
          8 column cell, with 2 nested cells
        </div>
        <Grid>
          <Cell
            cols={4}
            colsM={8}
          >
            <div>
              Nested 4 column cell, full width on mobile
            </div>
          </Cell>
          <Cell
            cols={4}
            colsM={8}
          >
            <div>
              Nested 4 column cell, full width on mobile
            </div>
          </Cell>
        </Grid>
      </Cell>
    </Grid>
  )
}

Pro tip: grids do not need to be direct descendants of cells.