Grid System

CSS grid is used to achieve grid layouts on various pages. Page layouts that utilize a grid should be named for the page or content section they contain and be suffixed with -layout, for instance:

.admin-users-layout {
  display: grid;
  grid-areas:
    'user avatar    bio'
    'user edit-link bio';
  …
}

Layouts should use the exponential spacing system for all margins, padding, and gutters.