Container
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.
Key | Value |
---|---|
0 | 0px |
1 | 126px |
2 | 228px |
3 | 330px |
4 | 432px |
5 | 534px |
6 | 636px |
7 | 738px |
8 | 840px |
9 | 942px |
10 | 1044px |
11 | 1146px |
12 | 1248px |
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.