Skip to content
Mesh

Grid

The grid is a third-party foundational component, previously used throughout nib pages to define horizontal structure. We recommend the use of the mesh layout components for future development.

For our grid we use the open source library styled-components-grid by our good friend and former colleague James Newell.

We have migrated to @nib/layout

We recommend the use of the layout components Columns and Column instead of Grid for page and content structuring (where possible).

The Basics

Our grid is full-width at all screen sizes and has no gutters. It is built using flexbox, and gracefully defaults back to inline-block where flexbox is unsupported.

The grid is made up of the grid wrapper and the grid units. Grid units have a size prop that accepts a number from 0 to 1 or an object of breakpoints with sizes specified.

As a guiding principle, try to separate stylistic concerns from layout concerns. In other words, don't apply styling directly to the grid or grid units, instead wrap contents in a component and style that.

1 / 2
1 / 2
1 / 3
1 / 3
1 / 3
1 / 4
1 / 4
1 / 4
1 / 4
1 / 12
7 / 12
1 / 6
1 / 6
jsx

Breakpoints

Our grid units can span different sizes at different breakpoints. This is 90% of how we build our pages responsively. Grid units by default fill the sapce and take up 100% of the container. To specify a size for all screens, set the size prop to a number e.g. size={1 / 2}. To set different sizes at different breakpoints see the below example. Be sure to read more about our breakpoints.

Resize
to see
responsive
cols
jsx

Grid

Halign

The halign prop allows you to set the horizontal alignment of the grid unit. The values for this must be one of the following: left (default), center, right, justify, and justify-center.

1 / 4
1 / 4
jsx

Valign

The valign prop allows you to set the vertical alignment of the grid unit. The values for this must be one of the following: top, center, bottom, and stretch (default).

1 / 2
1 / 2
jsx

Reverse

Adding a reverse prop to the grid will reverse the order of all grid units.

1
2
3
4
5
6
jsx

Wrap

When wrap={true}, the grid will allow grid units to flow over on to new rows if they do not fit in one line. Sizes are absolutely obeyed.

When wrap={false}, the grid will prevent grid units from wrapping and sizes are used to maintain the ratio of grid unit sizes, but absolute sizes are not obeyed.

1
2 / 3
1 / 2
1 / 4
jsx

Grid.Unit

Size

The size prop can be either a number or an object where the values are numbers for each desired breakpoint.

I change widths!
jsx

Grid units can also be set to take as little space as their contents (min) and to fill the remaining space in the grid (max).

1 / 6
min
1 / 12
Max
jsx

Visible

Grid units can be hidden at certain breakpoints.

never visible
always visible
visible on mobile
visible on tablet
visible on desktop
jsx