Показване на гридове в браузера дебъгер

При работа с гридове по време на уеб дизайн може да се наложи да проверите дали елементите се поставят правилно в мрежата. Освен това, ако сме направили грешка трябва да разберем от кой елемент започва неправилното разположение. За тази цел можем да използваме дебъгера в браузера.

Нека разгледаме грид с примера на дебъгера в браузера Chrome. Първо изберете интересуващия ни обект с грид и щракнете с десния бутон на мишката, за да изберете от списъка опцията 'Inspect':

Сега в дясно отворения панел на браузера насочете курсора към нашия обект с грид и забележете, че в реда до родителския елемент се намира бутон grid:

След като щракнете върху бутона grid, ще видите, че нашият обект се показва във визуално разбираема грид система, с посочване на номерацията на всички колони и редове:

Сега обърнете внимание на панела в дебъгера. В него са разположени раздели Styles, Computed, Layout и други. Превключете от раздела Styles, който е активен по подразбиране, към раздела Layout. Ще видите списък с настройките на вашия грид:

Нека изберем за показване първата опция Show track sizes, която показва размера на траковете:

С опцията Show area names може да се покажат имената на областите на грида, ако са зададени. А като изберем опцията Extend grid lines ще видим удължени извън рамките на грида линии на траковете: