Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Layout

Grid layout

This component is a beta so this page is a work in progress. Grid layout is used to construct a visual grid for responsive page layout. A proxy for CSS grid.

Status

Supported

Introduced

v5.1.0
View codeView StorybookView Design

Interactive demo

This demo lets you preview the grid layout component, its variations and configuration options.

columns
rows
columnGap
autoFlow
autoColumns
autoRows
rowGap
justifyContent
alignContent
alignItems
justifyItems
1import React from 'react';
2import { GridLayout } from 'newskit';
3
4export default () => (
5  <GridLayout
6    columns=""
7    rows=""
8    columnGap="space020"
9    autoFlow="row"
10    autoColumns=""
11    autoRows=""
12    rowGap="space020"
13    justifyContent=""
14    alignContent=""
15    alignItems=""
16    justifyItems=""
17  />
18);
19

Anatomy

The grid layout component contains the following.

ItemNameDescriptionComponentOptional

Options

The grid layout component has options that can be used to provide an appropriate experience for different use cases.

Row gap & column gap

The row gap and column gap can be set for each breakpoint.

Max-width

When the defined maximum width of the grid is reached (default set to auto), the grid will become fixed and the margins grow to fill the screen.

Span

Cells can be set to span any number of columns in the grid. If set to ‘full-width’ the cell will span all 12 columns and breakout across the margin of the grid. It will still be confined by the grid's max-width.

Order

The order that cells appear can be changed at different breakpoints.

Offset

Cells can be set to be offset by a specified number of columns.

Row gap & column gap

The row gap and column gap can be set for each breakpoint.

Max-width

When the defined maximum width of the grid is reached (default set to auto), the grid will become fixed and the margins grow to fill the screen.

Span

Cells can be set to span any number of columns in the grid. If set to ‘full-width’ the cell will span all 12 columns and breakout across the margin of the grid. It will still be confined by the grid's max-width.

Order

The order that cells appear can be changed at different breakpoints.

Offset

Cells can be set to be offset by a specified number of columns.

Usage

Here’s how and when to use the grid layout:

Do align content

Whenever possible, make sure page elements are lined up both horizontally and / or vertically.

Avoid aligning everything to the grid

Individual elements within the cells should align with each other rather than with the grid columns.

Tutorial

Learn how to use the grid layout component effectively using the tutorials below.

Grid layout tutorial

Step-by-step guide for engineers to build a layout using the grid layout component.

Guide in Figma for designers to use the grid layout component (internal only).

Step-by-step guide for engineers to build a layout using the grid layout component.

Guide in Figma for designers to use the grid layout component (internal only).

Accessibility considerations

The grid layout has the following accessibility considerations:

Ordering

Ordering can be used to render items in a different order to their tab order, this can be useful when building accessible interfaces as it allows the most important items to be focused first, even if they don’t visually appear this way.

API

Below are the properties for the grid layout component:

Grid layout

Grid layout has a range of props to define the experience in different use cases.

NameTypeDefaultDescriptionRequired
Grid layout item

Grid layout item has a range of props to define the experience in different use cases. Use within the grid layout.

NameTypeDefaultDescriptionRequired

GridLayoutItem is derived from the block component, so all it allows stylePresets, transitionPresets, and logicalProps.

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?