Grid

The grid provides the foundation for a harmonious positioning of elements, while maintaining a consistent and coherent look of a page as a whole. It brings calm to a page, and makes it easier for users to scan the content.

In HTML, text flows in a vertical motion, and this creates the basic rhythm of our pages. This rhythm is created by the space between each line of text, commonly named 'line height'. In visual terms, each line of text defines a visual guideline (the text literally 'sits' on it). This line is called 'baseline', and will be our common denominator in defining the grid.

Vertical best practices

  • The minimum vertical unit is 10px
  • The 'baseline' is equivalent to 2 vertical units, i.e. 20px
  • When positioning elements vertically, try using multiples of 10px
  • Whenever possible, make sure that your objects line up, both vertically and horizontally

Horizontal best practices

  • Horizontally distributed elements should be set 20px apart
  • Whenever possible, use AUI containers to position your elements
  • Avoid making anything just one column wide
  • Whenever possible, make sure that your objects line up, both vertically and horizontally

Example

one

two

two

three

three

three

four

four

four

four

six

six

six

six

six

six

eight

eight

eight

eight

eight

eight

eight

eight