Layout

When planning a page:

When laying out content on a page:

Use one of the Common layouts
Maintain a meaningful reading order across breakpoints between:
1. Source/markup order
2. Visual display order (the sequential logic of the graphical layout)
3. Tab/keyboard focus order.
Use semantic HTML5 markup
Use Grid rows and columns only as needed
- When customizing, beware of both squashed and overly-wide text content blocks
Test pages in viewport widths across all breakpoints (from 536 to 1200 pixels)
Define the language and reading direction in the <html> element (using lang and dir)
- Use left- and right- aligned text for left-to-right and right-to-left languages respectively;
- Be careful of eroding readability when using justified text;
- Avoid centered text formatting outside of headings or hero copy.

common layouts