Skip to content

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.

Docs image
4px grid
Docs image
8px grid

Row grid

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

Docs image

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.

Docs image
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-boardWidth & HeightBreakpointContainer widthColumnsColumn widthGutter
Desktop
Large
1440 x 800 px≥ 1200px1110px1265px30px
Tablet landscape
Medium
1024 x 768 px992 - 1199px930px1250px30px
Tablet portrait
Small
768 x 1024 px768 - 991px690px1230px30px
Mobile
Extra small
375 x 812 px≤ 767pxMin 315px *6Auto30px

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

Docs image
Align a component to the grid as a whole
Docs image
You don't need to align every element of a component to the grid
Docs image
Leave the gutters free. If you need more spacing between components, consider using more padding
do
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.

Usage

...

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

Check on full size here

Desktop first

...

html
<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:

html
<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