En grid kan beskrivas som ett rutnät innehållande rader och kolumner. Den fungerar som en mall där designen (text, bild m.m) placeras in för att layouten ska bli konsekvent och tydlig.

En grid ställs in centralt på webbplatsen. Där anges bredd, mellanrum mellan kolumner, hur många kolumner som ska användas och om griden ska vara centrerad.

Exemplet ovan visar ett grid som är 940 px bred

Mellanrum 20 px (20 px * 11 kolumner) = 220 px

Kolumn 60 px (940 px - 220 = 720 px/12 kolumner)

Mellanrummet mellan kolumnerna ligger till vänster om varje kolumn (utom den första).

Grid-typ

När en grid är skapad på webbplatsen går det att använda det i mallen. Där väljs grid-typ (om det ska vara pixelbaserat eller procentbaserat).

• Flexibelt grid
  • Procentbaserat - anpassar sig efter webbläsarfönstrets storlek
• Fast flexibelt grid
  • Procentbaserat - anpassar sig efter webbläsarfönstrets storlek, men kolumnerna bli konsekventa om de nästlas
• Fast grid
  • Pixelbaserat - kolumnerna är fasta, oberoende av webbläsarfönstrets storlek

Använd Flexibelt grid eller Fast flexibelt grid för att bygga responsivt.