Return to Sky UI homepage

The container() function returns a width in pixels, equal to the number of columns specified relative to a 12 column grid.

The width is calculated by multiplying the number of columns by the width of a single column, which is 84px, and adding the outer gutters (21px on each side).

This can be very useful to create constrained containers for content within the page.

KeyValue
00px
1126px
2228px
3330px
4432px
5534px
6636px
7738px
8840px
9942px
101044px
111146px
121248px

Usage

Container Function

import { container } from '@sky-uk/ui-core';
container(6);
// returns '636px'

container() widths should never be used to layout content horizontally and should only be used to constrain.

You can return the containers without a px suffix by passing false as a second argument. This is useful if you need to use the raw number for calculations.

container('md', false);
// returns 640

Use in layouts

We often encounter designs where content doesn't fill the entire 12 columns available:

We can use container() as a shorthand to achieve these layouts:

Container (component)

The Container component is a shorthand for the above approach using Box which can be used instead. See the Container component page for more information.

The Container and container() values assume that content will have the standard {{xs: 4, lg: 5}} padding applied and accounts for this within its width. If the gutter padding is not applied, the content will not align with the Grid. For more information see the Layout guide page.

Further Reading