Weergave van grids in de browserdebugger

Bij het werken met grids tijdens het opmaken van een website kan het nodig zijn om te controleren of de plaatsing van elementen in het grid correct verloopt. Bovendien, als we een fout hebben gemaakt, moeten we uitzoeken vanaf welk element de verkeerde plaatsing begint. Voor dit doel kunnen we de debugger in de browser gebruiken.

Laten we een grid bekijken aan de hand van de debugger in de browser Chrome. Eerst selecteren we het object dat ons interesseert met het grid en door met de rechtermuisknop te klikken selecteren we uit de lijst de optie 'Inspecteren':

Nu plaatsen we in het rechterpaneel van de browser dat is geopend de cursor op ons object met het grid en merken we dat in de regel naast het bovenliggende element zich een knop grid bevindt:

Nadat we op de knop grid hebben geklikt, zullen we zien dat ons object wordt weergegeven in een visueel begrijpelijk gridsysteem, met vermelding van de nummering van alle kolommen en rijen:

Let nu op het paneel in de debugger. Hierin zijn de tabbladen geplaatst Styles, Computed, Layout en andere. Schakel over van het tabblad Styles, dat standaard actief is, naar het tabblad Layout. U zult een lijst met instellingen voor uw grid zien:

Laten we voor de weergave de eerste optie Show track sizes selecteren, die de grootte van de tracks toont:

Met de optie Show area names kunnen de namen van de gridgebieden worden weergegeven, indien ingesteld. En door de optie Extend grid lines te kiezen zullen we de verlengde lijnen van de tracks buiten het grid zien: