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

При раду са гридовима током верстања веб сајта, понекад је потребно проверити да ли се елементи исправно размештају у мрежи. Поред тога, ако смо направили грешку, морамо да схватимо од ког елемента почиње погрешно позиционирање. За ову сврху можемо користити дебагер у браузеру.

Хајде да размотримо грид на примеру дебагера у браузеру Chrome. Прво изаберемо објекат који нас интересује са гридом и кликнемо десним тастером миша и изаберемо из листе опцију 'Inspector':

Сада у десној панели браузера која се отворила, пређимо курсором преко нашег објекта са гридом и приметимо да у реду поред родитељског елемента се налази дугме grid:

Након што кликнемо на дугме grid, видећемо да наш објекат приказује визуално разумљив систем грида, са назначеним нумерацијама свих колона и редова:

Сада обратите пажњу на панел у дебагеру. У њему се налазе картице Styles, Computed, Layout и остале. Пређимо са картице Styles, која је подразумевано активна, на картицу Layout. Видећете листу подешавања вашег грида:

Хајде да изаберемо за приказ прву опцију Show track sizes, која показује величину тракова:

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