The grid provides a way to arrange content responsively in order to create a consistent experience across multiple devices with different screen sizes.

For more information, refer to the following pages:

  • Authoring page for information about breakpoints and responsive authoring
  • Design page for information and templates for designing on the grid
  • Development page for information about responsive behavior in relation to component development

Thinking responsively

Since screen dimensions and width in CSS pixels vary widely between devices, and how people interact with the web across screens continues to evolve rapidly, content should not rely on a particular device type, screen size, viewport width, resolution, orientation, etc. to render well.

Instead of thinking about specific devices and dimensions, think about sizes conceptually, e.g.: extra-small, small, medium, large, extra-large, and focus on creating flexible, fluid, device-agnostic layouts that adapt to almost any screen.

  • Use a responsive layout grid and media queries
  • Take a device-agnostic approach to responsive
  • Start with the smallest breakpoint and work upwards
  • Never hide content
  • Avoid setting fixed dimensions
  • Test on real hardware