Breakpoints

We have 6 breakpoints, when a layout no longer fits on screen, we introduce smaller breakpoints. Specific Columns, Gutters and Margins are available without each breakpoint. These are available through Figma Foundations as Grid Styles.

Name	Scale	Max width	Columns	Gutters	Margins
Small Mobile	320-359px	Fluid	4	24px	16px
Mobile	360-512px	Fluid	4	24px	24px
Small Tablet	513-768px	Fluid	4	24x	24px
Tablet	769-1024px	Fluid	12	24px	32px
Desktop	1025-1280px	Fluid, Max 1224px	12	24px	48px
Desktop Large	1281px-∞	Fluid	12	24px	48px

Columns

We design with 12 columns, as it's easily devisable by 2, 3, 4, and 6. Content spans whole column widths, which won't have defined pixel value in responsive layouts.

Gutters

The empty space between columns, this separates content. If the gap is too great, the perception is content might be be linked.

Margins

The empty space to the left-and-right of the screen. Nothing goes in this area, it acts as intentional white space so text doesn't touch the edge of a display. This typically increases as screen sizes become larger.

Quick start for designers

You don't need to design every breakpoint, search Layout Grid Quick Start in Figma to get these following frames with grids for free. These are the agreed fixed values for Product Designers.

Not in Backpack code

There are many ways to do Columns and Gutters in code, some of which are already live across different parts of Skyscanner. For this reason we won't be offering Columns or Gutters as part of Backpack. Each squad will continue to setup this part of the grid as they see fit.

Furthermore, there will be no grid component made available. Squads should use either flexbox or css-grid to implement the designs using the defined backpack tokens.