Grid

Grids provide a consistent and repeatable framework for designers and developers to structure content.

Overview

Zurich's layout system is the structural foundation of our designs and implementations. It helps deliver visual consistency and organize content across our four defined breakpoints (Desktop, Tablet Landscape, Tablet Portrait and Mobile).

Vertical rhythm

4px and 8px grid

The 4px and 8px grids are the base units for laying out elements. The 8px grid should be used to define the overall content layout and the spacing between components; the 4px grid should be used for more detailed elements within components, such as paddings and spacings.

4px grid

8px grid

Row grid

Row grid is based on the 8px grid and can be helpful to correctly space elements vertically.

Baseline grid

12 columns grid

All our web components are created following the Bootstrap 4.6 grid system, with 12 columns and four breakpoints corresponding to the typical sizes for Desktop, Tablet Landscape, Tablet portrait and Mobile.

Anatomy

The grid system is composed of margins, columns and gutters.

Grid anatomy

Columns can vary in width (between breakpoints and within each breakpoint range) but are always equal to each other. Most breakpoints are designed using the 12-column grid, except for the Small (mobile) breakpoint, which uses a 6-column grid.

Gutter, the space between columns, has a fixed width of 30px for all breakpoints.

Margins are set according to the breakpoint range and have a fixed width.

Fluid and fixed grid

Usage
Fixed width	Fixed grid is the default grid to be used for content that spans over 12 columns, with a fixed-width container centered on the page.
Horizontal grouping	Fluid grid is a responsive grid to be used when the content of the page occupies 100% of the screen size. A common use case is in dashboards.

Fixed-width art-board sizes

Art-board	Width & Height	Breakpoint	Container width	Columns	Column width	Gutter
Desktop Large	1440 x 800 px	≥ 1200px	1110px	12	65px	30px
Tablet landscape Medium	1024 x 768 px	992 - 1199px	930px	12	50px	30px
Tablet portrait Small	768 x 1024 px	768 - 991px	690px	12	30px	30px
Mobile Extra small	375 x 812 px	≤ 767px	Min 315px *	6	Auto	30px

For Mobile screen resolutions (≤ 767px), the content container will be considered fluid, with a minimum width of 315px and 30px horizontal margins, and, optionally, a maximum width of 510px.

Content placement

The page content can span full width, full content or narrow content.

Full content and narrow content span over a different number of columns depending on the breakpoint:

Alignment

Align a component to the grid as a whole

You don't need to align every element of a component to the grid

Leave the gutters free. If you need more spacing between components, consider using more padding

Don't use gutters as column.

How to use grids in Figma

You can choose the grid layout you need from the "Layout grid" function in Figma, in the right side bar.

...

<section z-grid="main">
 <!-- 12 elements -->
</section>

Check on full size here

Desktop first

...

<section z-grid="main">
  <div column="1:8">1:8</div>
  <div column="10:12">10:12</div>
  <div column="2">2</div>
  <div column="4:12">4:12</div>
  <div column="4:6">4:6</div>
  <div column="7:9">7:9</div>
</section>

Check on full size here

Mobile first

Directly targeting mobile:

<section z-grid="main">
  <div column="m:1:2">m:1:2</div>
  <div column="m:4:6">m:4:6</div>
  <div column="m:1:2">m:1:2</div>
  <div column="m:3:4">m:3:4</div>
  <div column="m:5:6">m:5:6</div>
</section>

Check on full size here