@invisionag/iris-react-grid
v1.4.2
Published
```js import { GridContainer, GridX, Cell } from '@invisionag/iris-react-grid'; ```
Downloads
72
Maintainers
Keywords
Readme
import { GridContainer, GridX, Cell } from '@invisionag/iris-react-grid';
iris-react-grid
offers a collection of layout components to place other components on a fully responsive grid. It's based on the XY Grid from ZURB's Foundation 6 for Sites.
Usage
Please do not apply other styles or classes to any of the following components as it can break the Foundation grid. Please use new wrapper elements inside Cell
if you want to add new paddings, etc.
GridContainer
The GridContainer
component provides the outer frame for all subsequent content.
In its standard version, the grid container will be centered at a max-width of 1200px.
Every single page inside injixo has to use that content container component to ensure consistency across apps.
There are no other direct children allowed than the GridX
component.
Props
fluid
fluid?: boolean;
Adding the prop fluid
results in a full width grid.
GridX
The GridX
component is another wrapper provided by Foundation that allows us to divide horizontal space into columns. Inside this component only Cell
is allowed. This component has no Props.
Cell
The Cell
component allows us to place and adjust content on a horizontal axis.
Props
size
size: number | number[];
Adding numbers as array allows for a dynamic resizing based on Foundation's breakpoints (small, medium, large).
Example:
<Cell size={[12, 3, 1]} />
Results in having a cell at 12 column width on small, 3 column width on medium and 1 column width on large.
offset
offset?: number | number[];
Adding an offset to a cell provides an easy way to skip a certain number of columns. It follows the same array principle as in sizes
.
Example:
<Cell offset={[0, 0, 2]} />
In this example we'd move our cell two columns to the right when the viewport is >= large.