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.