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
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZDS | Grid example</title>
    <link rel="stylesheet" href="/0.5.6/@zurich/design-tokens/index.css" />

    <style>
      body {
        margin: 0;
      }

      div {
        background-color: var(--zc-blue-zurich);
        width: 100%;
        min-height: 60px;
        text-align: center;
        display: grid;
        align-items: center;
        color: var(--zg-white);
        font: var(--zf-body-16--600);
        margin: 6px;
      }
    </style>
  </head>

  <body>

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

  </body>

</html>

Check on full size here

Mobile first ​

Directly targeting mobile:

html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZDS | Grid example</title>
    <link rel="stylesheet" href="/0.5.6/@zurich/design-tokens/index.css" />

    <style>
      body {
        margin: 0;
      }

      div {
        background-color: var(--zc-blue-zurich);
        width: 100%;
        min-height: 60px;
        text-align: center;
        display: grid;
        align-items: center;
        color: var(--zg-white);
        font: var(--zf-body-16--600);
        margin: 6px;
      }
    </style>
  </head>

  <body>

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

  </body>

</html>

Check on full size here