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.
Interactive demo
This demo lets you preview the grid layout component, its variations and configuration options.
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.
| Item | Name | Description | Component | Optional |
|---|
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.
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 has a range of props to define the experience in different use cases.
| Name | Type | Default | Description | Required |
|---|
Grid layout item has a range of props to define the experience in different use cases. Use within the grid layout.
| Name | Type | Default | Description | Required |
|---|
GridLayoutItem is derived from the block component, so all it allows stylePresets, transitionPresets, and logicalProps.