Grid
We are positioning elements onscreen using the cinch grid system. Designing to the grid creates a consistency between development and design.
We have three types of grid to reflect differing content needs.
Standard grid
Our standard grid is used most commonly when there is a mix of interactive elements and areas of copy. The 12 columns allow content to be easily divided into 2, 3 or 4 column layouts on large devices.
0 - 599px
Small displays
- 4 columns
- 16px margins
- 16px gutters
600 - 959px
Medium displays
- 6 columns
- 32px margins
- 32px gutters
960px and above
Large displays
- 12 columns
- 48px margins
- 48px gutters
- 1064px max width
Copy grid
The copy grid is designed to optimise the reading experience. It's a much more focussed grid that floats centrally allowing for a comfortable line lengh for our main body copy on large devices.
0 - 599px
Small displays
- 4 columns
- 16px margins
- 16px gutters
600 - 959px
Medium displays
- 6 columns
- 32px margins
- 32px gutters
- 816px max width
960px and above
Large displays
- 6 columns
- 48px margins
- 48px gutters
- 816px max width
Full width grid
The full width grid is designed for the search page enabling maximum use of space available to display car ads. It can also be used to accomodate designs that include sidebars on large devices.
0 - 599px
Small displays
- 4 columns
- 16px margins
- 16px gutters
600 - 959px
Medium displays
- 6 columns
- 32px margins
- 32px gutters
960px and above
Large displays
- 12 columns
- 48px margins
- 32px gutters
- 1599px max width
Above 1600px
Extra large displays
- 15 columns
- 48px margins
- 32px gutters
- 1900px max width
How to use the grids
The grids are flexible enough to allow designers the space to create dynamic layouts whilst retaining consistency with the rest of the site.
Alignment
In the resources tab you can find some best practice examples of grid usage within Figma
Do
- Align content to the grid.
- Indent within columns. Ensure that the rules are consistent, i.e. 48px padding within columns.
Don't
- Ignore the grid.
- Align within gutters unless part of a larger element that is aligned to the grid.
Do
- Use the right grid for the right context.
Don't
- Use the wrong grid for the wrong context, if in doubt speak to one of the design system team.
Do
- Drop columns. You can indent from the grid where needed, however ensure this is consistent with other similar pages.
Don't
- Use overly complex layouts as it can make it harder for the user to read.
Do
- Use the full width grid when adding a sidebar. The sidebar has a max width of 342px within the first three columns.
Don't
- Make the sidebar too wide as it will squash content cards and break the grid.
