Grid

This is the grid (defined with CSS Grid) used in the WAI website and some tools.

You can view it in the browser on this page by using the Developer Tools in Firefox (select an element with default-grid class and pick “Overlay Grid” in the Layout tab).

Used by

This component is used by:

ATAG Report Tool
WCAG EM Report Tool (2020 rebuild)
WCAG Supporting Documents redesign project

Examples

Example 1: full grid

WAI homepage with purple lines overlaid, they form 10 columns with the first and last using all remaining whitespace

Example 2: more compact grid for tools

ATAG Report Tool with purple lines overlaid, they form 10 columns, slightly smaller than the one above, with the first and last using all remaining whitespace

Code

Any element with a default-grid class becomes a grid container. Elements that are direct children of the grid container can be positioned on the grid. See CSS Grid for more details on how CSS Grid works.

Variations

compact-grid: Add compact-grid in addition to the default-grid class. This is a narrower grid for more compact interfaces.