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> ) }
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.