Siatka

Ostatnia aktualizacja: 04.09.2011

Siatka (ang. grid) jest sposobem podziału układu strony przy użyciu proporcjonalnej, geometrycznej struktury. Poszczególne elementy serwisu mogą być umieszczone w miejscach wyznaczonych przez niewidzialną dla oka użytkownika siatkę (widoczne są jedynie skutki jej zastosowania) i adekwatnie do niej wyrównane w pionie lub jednocześnie w pionie i poziomie.

Kiedy używać?

Trudno wyobrazić sobie sytuację w której użycie siatki nie byłoby zasadne. Im bardziej skomplikowana jest strona i więcej informacji zawiera, tym siatka ma większe znaczenie. Siatki są często stosowane np. w serwisach firmowych i informacyjnych.

Siatka ma mniejsze znaczenie dla stron o charakterze artystycznym, np. w portfolio fotografa albo serwisie agencji interaktywnej.

Dlaczego używać?

Siatka wprowadza do strony porządek, logikę, strukturę i nadaje układowi strony balans dzięki któremu jest on łatwiejszy w zrozumieniu, skanowaniu wzrokiem i użyciu

Jak używać?

Jedną z metod utworzenia siatki jest podział strony w pionie na równe części. Możesz wyobrazić sobie, że strona jest podzielona przy użyciu niewidocznych dla oka linii. Na przykład strona o szerokości 960 pikseli może zostać podzielona na 12 kolumn o szerokości 60 pikseli każda. Każda kolumna może więc być wielokrotnością 60 pikseli. Siatka wyznacza także odstępy między kolumnami, które nie mogą być mniejsze niż 60 pikseli.

Dodatkowo elementy mogą być wyrównane w poziomie z zachowaniem proporcjonalnych odległości.

Jedną z metod tworzenia siatki może być użycie 960 Grid System. Jest gotowy zestaw stylów CSS pozwalający na łatwe utworzenie pionowej siatki o takiej szerokości.

Zrzut ekranu demonstrujący rozwiązanie 960 Grid System. Strona z tak zastosowaną siatką może być dzielona na wiele kolumn i każda z nich będzie posiadać proporcjonalną szerokość. 960 Grid System pozwala także na zastosowanie systemu 24-kolumnowego w którym każda kolumna ma szerokość 30 pikseli.

Tworzenie tak dokładnie wyliczonej siatki nie zawsze jest konieczne lub możliwe. Pomimo tego elementy gridu, takie jak proporcjonalne, spójne odstępy wewnętrzne, marginesy i szerokości kolumn odgrywają zawsze ważną rolę w projekcie układu serwisu oraz projekcie graficznym.