Skip to main content

Layout Grids

Layout Grids are the collective term for breakpoints, margins, columns and gutters. They help build consistent designs, and form a familiar experience for travellers.

Table of contents


Layout Grids


When layouts no longer work on screen, we introduce breakpoints. We have 6 breakpoints.


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.


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.


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

Breakpoint and Margins

NameScaleMarginsScale in rems
Small Mobile320-359px16px20-22.438rem
Small Tablet513-768px24px32.063–48rem
Desktop Large1281px +48px80.063rem +

For Engineers


Backpack breakpoints on Web are available as mixins in Sass or in the BpkBreakpoint component.


Layout grid margins are meant to be used as the empty space to the left-and-right of the screen. You should be using these in the form of tokens. For a full list of layout grid margin tokens, have a look at our tokens page.

For Designers

If you're designing new screens, we can use Columns and Gutters in addition to set Breakpoints and Margins. These are available through Figma Foundations as Grid Styles.

Grid Styles in Figma

NameScaleColumn TypeColumnsGuttersMarginsMax Width
Small Mobile320-359pxStretch424px16pxFluid
Small Tablet513-768pxStretch424px24pxFluid
Desktop Large1281px +Stretch1224px48pxFluid, or 1224px

What is, and isn't in Backpack

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.

Layout Grids Guidelines