This component provides the grid context to your app. It does not have any required props and renders nothing in the DOM. This is where the global settings are defined.
import react from 'react'; import { GridProvider } from '@faceless-ui/css-grid; export const MyApp = () = ( <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> );
breakpoints
An object of breakpoints l
, m
, and s
, equal to the width of the breakpoint in pixels. These breakpoints are used by the <Cell>
components to make them responsive. These are also used to make the column and row gaps responsive.
rowGap
An object of row-gap values, one for each breakpoint. See the MDN Docs for exact browser specifications.
colGap
An object of column-gap values, one for each breakpoint. See the MDN Docs for exact browser specifications.
cols
The number of columns available at each breakpoint. Once a row reaches maximum capacity, cells will begin to wrap onto the next row.
classPrefix
Prepends onto onto every generated class name, useful for unique name-spacing within complex stylesheets.
smallestBreakpointReached
The key of the smallest breakpoint reached. See breakpoints.
...settings
All settings are spread into the context.
This component wraps cells and has no required props. It creates a DOM element with the grid-template-columns CSS property — a dynamic value set based on the [grid settings](#grid settings) and the number of columns currently available. You can also nest grids inside other grids.
import react from 'react'; import { Grid, Cell } from '@faceless-ui/css-grid; export const MyComponent = () = ( <Grid> <Cell> ... </Cell> </Grid> );
htmlElement
Customize the HTML element that is rendered in the DOM. Defaults to div
.
...rest
All other props are spread onto the DOM element as HTML attributes.
cols
The number of currently available columns, per breakpoint.
This component will create a DOM element that spans the columns of your grid based on the cols
prop, which dynamically sets the grid-column-end CSS property. Cells will display inline to one another and wrap to the next row once that row reaches maximum capacity. To make the cell responsive, redefine the number of columns it spans on each breakpoint, such as colsM
.
import react from 'react'; import { Grid, Cell } from '@faceless-ui/css-grid; export const MyApp = () = ( <Grid> <Cell cols={12} colsM={6} > ... </Cell> </Grid> );
cols
The number of columns for the cell to span.
colsM
The number of columns for the cell to span at your m
breakpoint.
colsL
The number of columns for the cell to span at your l
breakpoint.
htmlElement
Customize the HTML element that is rendered in the DOM. Defaults to div
.
...rest
All other props are spread onto the DOM element as HTML attributes.
cols
The number of currently available columns, per breakpoint.
This is a hook you can use to access the context of any <Cell>
component.
import react from 'react'; import { useCell } from '@faceless-ui/css-grid; export const MyComponent = () => { const cell = useCell(); return ( ... ) };
This is a hook you can use to access the context of any <Grid>
component.
import react from 'react'; import { useGrid } from '@faceless-ui/css-grid; export const MyComponent = () => { const grid = useGrid(); return ( ... ) };
This is a hook you can use to access the global grid settings.
import react from 'react'; import { useSettings } from '@faceless-ui/css-grid; export const MyComponent = () => { const settings = useSettings(); return ( ... ) };
All types can be directly imported.
import { IGrid, GridProps, ICell, CellProps, SettingsProviderProps, Settings, Breakpoints, Gaps, Columns } from '@faceless-ui/css-grid/dist/types';