Grid and break points

​The grid and content area widths

The grid is a layout system. It is the foundation for how elements should be applied and aligned on our web pages. This system is critical in helping us maintain a consistent design that is clear and easy to understand. Always respect the grid. Note that with the responsive design, the grid will change according to the device used! Responsive layout can be toggled on by adding "responsive" CSS class to the body element (example: <body class="responsive">).


Breakpoints, layouts and columns

The Fortum site contains four layouts and three breakpoints to separate them. The minimum proper expected width of layout is 320 px.
​Phone 320 px ≧ viewport-width < 768 px​
​Tablet ​768 px ≧ viewport-width < 961 px
​Desktop ​961 px ≧ viewport-width < 1280 px
​Wide desktop ​1280 px ≧ viewport-width
  • The Fortum site grid is based on 5 columns, each 170 px wide, with 20 px gutter in between. The page is centred to the viewport.
  • The wide desktop layout is identical to desktop layout, but the column sizes and text sizes bumped up a bit to 200 px wide column and 30 px wide margin.
  • The mobile is single column, 100 % wide with 10 px margin.
  • There is one exception: Target page, which contains 4 columns, is stretched to fill 5 columns wide (each of the four columns is 217/257 px wide).