Device-specific fluid grid layouts allow us to maximise consistency through a responsive user interface, resulting in visually confident design solutions. Our three device breakpoints enable guided development through structured creative design, considering maximum to minimum screen size.
- Can be combined to produce more complex layouts eg. 50% / 25% / 25%
- Ensure that when selecting column layouts for different breakpoints that the columns do not become too narrow for the content you are placing within them before the layout changes
- For detailed guidance on working with grids and vertical spacing please refer to the style guide.
Examples
Left to right
One
Two
Three
Four
Five
Six
Right to left
One
Two
Three
Four
Five
Six
Unequal width columns
An 8 columns and 4 column layout ( 66% / 33% ) at large screen sizes is available for use.
First column
Second column
More complex layouts
The following example shows how combining the column layouts can produce more complex layouts. Here the layout is a single column at mobile, single column followed by two 50% columns at tablet and 50% / 25% / 25% columns at desktop.
First column
Second column
Third column
Notes for developers
- Combine the modifiers to display the required number of columns at the different break points.
- It is possible to nest column layouts to achieve more complex layouts at different screen sizes.
Code Examples
Left to right
One
Two
Three
Four
Five
Six
<div class="l-columns [ Modifiers ]">
<div class="l-columns__column">
...
</div>
</div>Right to left
One
Two
Three
Four
Five
Six
<div class="l-columns l-columns--reversed [ Modifiers ]">
<div class="l-columns__column">
...
</div>
</div>Unequal width columns
An 8 columns and 4 column layout ( 66% / 33% ) at large screen sizes is available for use. This is only guaranteed to work as a single row, if more are required use another l-columns container to create the next row.
First column
Second column
<div class="l-columns l-columns--66-33-large [ Modifiers ]">
<div class="l-columns__column">...</div>
<div class="l-columns__column">...</div>
</div>Nesting column layouts for more complex layouts
The following example shows how combining the column layouts can produce more complex layouts. Here the layout is a single column at mobile, single column followed by two 50% columns at tablet and 50% / 25% / 25% columns at desktop.
First column
Second column
Third column
<div class="l-columns [ Modifiers ]">
<div class="l-columns__column">
<div class="l-columns [ Modifiers ]">
</div>
</div>
</div>Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.l-columns |
Base style for column layouts | Yes | div |
|
.l-columns--reversed |
Modifier - Display columns right to left | .l-columns |
||
.l-columns--2-small |
Modifier - Two columns at small screens only | .l-columns |
||
.l-columns--2-medium |
Modifier - Two columns at medium screens only | .l-columns |
||
.l-columns--3-medium |
Modifier - Three columns at medium screens only | .l-columns |
||
.l-columns--4-medium |
Modifier - Four columns at medium screens only | .l-columns |
||
.l-columns--2-large |
Modifier - Two columns at large screens only | .l-columns |
||
.l-columns--3-large |
Modifier - Three columns at large screens only | .l-columns |
||
.l-columns--4-large |
Modifier - Four columns at large screens only | .l-columns |
||
.l-columns--5-large |
Modifier - Five columns at large screens only | .l-columns |
||
.l-columns--6-large |
Modifier - Six columns at large screens only | .l-columns |
||
.l-columns--66-33-large |
Modifier - Eight column followed by a 4 column ( 66% / 33% ) at large screens only | .l-columns |
Only use for a single row at large screens | |
.l-columns__column |
Base style for an individual column | Yes | .l-columns > div |