System siatki dzieli stronę na kolumny i wiersze, które wyznaczają miejsce na treść. Wprowadza porządek w układzie. Szwajcarski projektant Josef Müller-Brockmann skodyfikował zasady siatki w latach 60. XX wieku, a jego książka Grid Systems in Graphic Design pozostaje standardowym źródłem wiedzy. Gazety, czasopisma i strony internetowe korzystają z siatek, choć używają ich w różny sposób.

Typowa siatka składa się z kolumn, odstępów między kolumnami i marginesów. Kolumny przechowują treść. Odstępy między kolumnami oddzielają kolumny. Marginesy wyznaczają ramę strony. Siatka 12-kolumnowa jest powszechna w internecie, ponieważ dzieli się równomiernie na połowy, trzecie, czwarte i szóste części. Projektanci mogą rozciągnąć wiele kolumn, aby uzyskać szerszą treść, lub użyć pojedynczej kolumny, aby uzyskać węższy tekst. Siatka nie dyktuje projektu. Zapewnia strukturę, którą projektant może dowolnie modyfikować, zmieniać lub łamać.

Komponenty siatki

• Kolumny: pionowe paski treści.
• Rynny: przerwy między kolumnami.
• Marginesy: zewnętrzne krawędzie układu.
• Siatka bazowa: poziome linie służące do wyrównywania tekstu.

Przerwanie siatki może być skuteczne. Obraz z pełnym spadem, ignorujący kolumny, przyciąga uwagę właśnie dlatego, że narusza strukturę. Ale przerwanie działa tylko wtedy, gdy siatka jest wystarczająco silna, by ją odczuć.