Hero Image


Unit & grid system

Svenska Spel´s responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

Grid System

Our base unit is 12-pixels. We use multiples of the base unit to create the dimensions of our columns, components and patterns along with their margins and padding to ensure coherency and consistency. Example: 6, 12, 18, 24, 36, 48 px.

We do allow the base unit to be divided in 2 when needed.

Grid system

Columns, gutters and margins

The responsive layout grid is made up of three elements: columns, gutters and margins.

Gutters and margins
  1. Margins
  2. Columns
  3. Gutters


Content is placed in the areas of the screen that contain columns.

In responsive layouts, column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. A breakpoint can correspond with mobile, tablet, or other screen type.

Columns on grid system


A gutter is the space between columns that helps separate content.

Gutter widths are fixed values at each breakpoint range. To better adapt to a given screen size, gutter widths can change at different breakpoints.

Wider gutters are more appropriate for larger screens, as they create more open space between columns.

Gutters on mobile device

On mobile at a breakpoint of xs—>am – this layout grid uses 12 px gutters.

Gutters on mobile device

On a tablet/desktop at a breakpoint md—>xl – this layout grid uses 24 px gutters.


Margins are the space between content and the left and right edges of the screen.

Margin widths are defined using fixed or scaling values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.

Margins on grid system


A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.

Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

DeviceBreaking pointProperty
Extra small (mobile)480pxxs
Small (portrait tablet)480pxsm
Almost Medium768pxam
Medium (landscape tablet)1024pxmd
Large (desktop)1357pxlg
Extra large (large desktop)1600pxxl