Jump to main content

Grid

How it works

The grid gives the ability to maintain semantic meaning in the page, while placing the content in whatever visual way required. The distinguishing feature of the grid that enables it to be used for grouping other widgets, is that its cells are containers that preserve the semantics of their descendant elements.

Considerations

This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:

  • Each column containing text should span a minimum of 3 columns.
  • Only columns should be direct children of rows.
  • The starting point of your page should be a well structured and accessible source document. Ensure the document remains in a logical order for screen readers, irrespective of how the content looks visually.
  • Ensure to use order and the grid-placement properties only for visual, not logical, reordering of content.

Resources