page header

Grid

The grid is a responsive, mobile first, fluid system that scales 12 columns across the viewport of a device. The grid is based on a 16 pixel uniform spacing structure that's used to appropriately arrange content into aligned columns and rows.

Anatomy

Breakpoints

See breakpoint support in web core style sheetsLink to external site.This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.

Columns, gutters, and margins scale as the device and viewport increases or decreases. Different breakpoints require either a fixed or fluid responsive grid.

  • Fluid grid: A grid built using columns that are considered flexible. When the screen size is changed, the widths of these columns will adjust proportionally.
  • Fixed grid: A grid built with columns that have a defined width. When the screen size is changed, the columns do not change their width.

BreakpointSizeDeviceGutterSpacingTypeResponsive
XS (X-Small)< 660pxPhone16px16pxFluid
SM (Small)≥ 660pxTablet (portrait)16px16pxFluid
MD (Medium)≥ 1024pxTablet (landscape)32px32pxFluid
LG (Large)≥ 1232pxDesktop32px32pxFixed

Guidlines

Two grid sizes are available within the toolkit. Both grids are based on a 12 column structure, but have different gutter and margin sizes.

  • For viewports larger than 1024 pixels, use the 32-pixel grid
  • For viewports smaller than 1024 pixels, use the 16-pixel grid

  • When building a design to be accessed on multiple viewports, always start with a phone or XS grid size. This will help you establish content hierarchy, layout, and design feasibility that you can apply later to larger-sized viewports.
  • Design within artboards that represent our target device sizes:
DeviceDeviceSize
PhoneiPhone 11 Pro375 x 812px
Tablet11" iPad Pro (portrait)834 x 1194px
Desktop1440 x 900px

Behavior

  • Avoid breaking alignment or slightly oversizing a container to add visual interest or emphasis
  • Create relationships and hierarchy among content elements using the margins and gutters in the grid shared by the page layout