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

Anatomy

Layout Grids

Breakpoints

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

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.

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.

Breakpoint and Margins

NameScaleMarginsScale in rems
Small Mobile320-359px16px20-22.438rem
Mobile360-512px24px22.5–32rem
Small Tablet513-768px24px32.063–48rem
Tablet769-1024px32px48.063–64rem
Desktop1025-1280px48px64.063–80rem
Desktop Large1281px +48px80.063rem +

For Engineers

Breakpoints

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

Margins

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
Mobile360-512pxStretch424px24pxFluid
Small Tablet513-768pxStretch424px24pxFluid
Tablet769-1024pxStretch1224px32pxFluid
Desktop1025-1280pxStretch1224px48pxFluid
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