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).
This component is used by:
- ATAG Report Tool
- WCAG EM Report Tool (2020 rebuild)
- WCAG Supporting Documents redesign project
Example 1: full grid
Example 2: more compact grid for tools
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.
compact-gridin addition to the
default-gridclass. This is a narrower grid for more compact interfaces.