Grid examples

Center layouts
  • Examples: Grid(8), Grid(12)

  • Focus towards editorial content

  • Story related

  • Immersive the audience, give them space to consume the content

In order to structure and distribute elements and components, we use grids to help us setting up different kind of layouts.

We use a 12 column layout (except on mobile) to achieve high flexibility for various layouts with different use cases. It's a commonly used system in the web.

The grid needs to be put on the page first, then the components are to be put within the grid.

No component should be outside of a grid except videos if we need them to be full-width.

Most common layouts are: Grid(8), Grid(12), Grid(8-4) and Grid(6-6). You can find examples for these grids below.

Grid layout examples

Test content in a Grid (8) layout.

Grid (8) - for example on story pages
Grid (12) example

Discover more

  • Examples: Grid(4-8), Grid(8-4)

  • Default option for content with text components and images in one line

  • Used to structure content sections

  • E.g. Step by step content

Two third layouts

Test content in a Grid (8-4) layout.

Grid (8-4) - for example on evergreen pages
Grid(6-6) example


please be aware that you are leaving this website.