Wyświetlanie siatek w narzędziach deweloperskich przeglądarki

Podczas pracy z siatkami w procesie tworzenia stron internetowych czasami trzeba sprawdzić, czy rozmieszczenie elementów w siatce przebiega prawidłowo. Ponadto, jeśli popełniliśmy błąd, musimy ustalić, od którego elementu zaczyna się nieprawidłowe rozmieszczenie. Do tego celu możemy użyć narzędzi deweloperskich w przeglądarce.

Przyjrzyjmy się siatce na przykładzie narzędzi deweloperskich w przeglądarce Chrome. Najpierw wybieramy interesujący nas obiekt z siatką, klikamy prawym przyciskiem myszy i wybieramy z listy opcję 'Zbadaj':

Teraz w otwartym po prawej stronie panelu przeglądarki najedź kursorem na nasz obiekt z siatką i zauważ, że w wierszu obok elementu nadrzędnego znajduje się przycisk grid:

Po kliknięciu przycisku grid zobaczymy, że nasz obiekt jest wyświetlany w wizualnie zrozumiałej siatce, z wskazaniem numeracji wszystkich kolumn i wierszy:

Teraz zwróć uwagę na panel w narzędziach deweloperskich. Znajdują się w nim zakładki Styles, Computed, Layout i inne. Przełącz się z zakładki Styles, która jest domyślnie aktywna, na zakładkę Layout. Zobaczysz listę ustawień swojej siatki:

Wybierzmy do wyświetlenia pierwszą opcję Show track sizes, która pokazuje rozmiary torów (ścieżek):

Za pomocą opcji Show area names można wyświetlić nazwy obszarów siatki, jeśli są zdefiniowane. A wybierając opcję Extend grid lines zobaczymy przedłużone poza ramkę siatki linie torów: