Grids

A grid can be described as a network of boxes containing rows and columns. It serves as a template for where the design (text, image etc.) is placed in order to make the layout consistent and clear.

A grid is set centrally on the website. It specifies the width, spacing between columns, how many columns to use, and whether the grid should be centred.

The example above shows a grid that is 940 px wide

Spacing 20 px (20 px * 11 columns) = 220 px

Column 60 px (940 px-220 = 720 px/12 columns)

The spacing between the columns is to the left of each column (except the first one).

Fluid or fixed fluid grid

When a grid is created on the website, it can be used in the template. There, select the grid type, if it should be Pixel based or Percent based:

• Fluid grid
  • Percent based - adjusts to the size of the browser window.
• Fixed fluid grid
  • Percent based - adjusts to the size of the browser window, but the columns become consistent if they are nested.
• Fixed grid
  • Pixel based - the columns are fixed, regardless of the size of the browser window.

Use Fluid grid or Fixed fluid grid to build responsively.