Skip to main contenteBay Playbook

Layout in product

A responsive grid dynamically updates the page layout according to viewport size. The use of a grid allows us to remain consistent throughout our products and platforms.

Stylized graphic for 3 different screen sizes with grids.

Grids

We have four main grid presets to consolidate margin and gutter adjustments across breakpoints. Please note that these names are slightly different than the ones found in the breakpoints section below.

Small 8 column (320–511px)

Use for small to medium screens.

Construction

  • 8 columns flexed
  • 8px gutters
  • 16px margins fixed
A mobile search results page with an overlayed pink diagram of 8 columns. Numbers above indicate the left and right margins are 16px, and the gutters between columns are 8px.

Medium 16 column (512–1279px)

Use for medium to large screens.

Construction

  • 16 columns flexed
  • 16px gutters
  • 32px margins fixed
A tablet search results page with an overlayed pink diagram of 16 columns. Numbers above indicate the left and right margins are 32px, and the gutters between columns are 16px.

Large 16 column (1280–1679px)

Use for large to x-large screens.

Construction

  • 16 columns flexed
  • 16px gutters
  • 48px margins fixed
A desktop search results page with an overlayed pink diagram of 16 columns. Numbers above indicate the left and right margins are 48px, and the gutters between columns are 16px.

X-large 16 column (1680px+)

Use for x-large screens. The columns are fixed-widths with auto margins from 1680px+. Max design area excluding margins is 1584px wide.

Construction

  • 16 columns fixed
  • 16px gutters
  • Margins auto/flexed
An extra large desktop search results page with an overlayed pink diagram of 16 columns. Numbers above indicate the left and right margins are set to auto-width, and the gutters between columns are 16px.

Spacing blocks

Spacing blocks are used to create spacing and dimension throughout the system.

Activating grids in Figma

To activate grids in Figma, select a frame, navigate to the "layout grid" section on the right panel, and select the "style" button that appears on hover. Choose the appropriate grid from the menu.

A detailed step-by-step diagram of how to select a grid style in Figma. Step 1 is selecting the frame. Step 2 is selecting the layout grid icon that looks like 4 circles in a grid. Step 3 is selecting a grid preset from the dropdown. In this case it is the “Small screen (0-511) preset. Step 4 shows the grid selected in the UI. Step 5 shows the pink 8-column grid preset on a frame the size of a mobile screen.

Screen sizes for designers

Designers should create focused layouts for at least three core screen sizes—small (375px), medium (768px), and large (1280px)—to effectively collaborate with development partners. While (320px) widths may not be a standard design size, it is our minimum supported viewport and should remain a consideration. Whenever possible, we recommend designing across the full range of screen sizes listed below to ensure optimal behavior at all breakpoints and a smoother development handoff.

A detailed grid of screen size names and widths. There are 4 columns. From left to right reads “Small”, “Medium”, “Large”, and “X-Large”. Small has 320 Min, 360, and 375. 320 is highlighted in pink. Medium has 512, 768, and 1024. 768 is highlighted in pink. Large has 1280, 1440, and 1679 Max. 1280 is highlighted in pink. X-Large has 1680+.

Breakpoints

Resources