Zobrazení gridů v prohlížečovém ladicím nástroji

Při práci s griddy během tvorby layoutu webu může být potřeba zkontrolovat, zda správně probíhá umísťování prvků v gridu. Navíc, pokud jsme udělali chybu, musíme zjistit, od kterého prvku začalo nesprávné umístění. K tomuto účelu můžeme použít ladicí nástroj v prohlížeči.

Pojďme si grid prohlédnout na příkladu ladicího nástroje v prohlížeči Chrome. Nejprve vybereme nás zajímající objekt s gridem, klikneme pravým tlačítkem myši a vybereme ze seznamu možnost 'Prozkoumat prvek':

Nyní v panelu prohlížeče, který se otevřel vpravo, najedeme kurzorem na náš objekt s gridem a všimneme si, že na řádku vedle nadřazeného prvku se nachází tlačítko grid:

Poté, co klikneme na tlačítko grid, uvidíme, že náš objekt je zobrazen ve vizuálně srozumitelné gridové soustavě, s vyznačením číslování všech sloupců a řádků:

Nyní věnujte pozornost panelu v ladicím nástroji. Jsou v něm umístěny záložky Styles, Computed, Layout a další. Přepněte se ze záložky Styles, která je aktivní ve výchozím nastavení, na záložku Layout. Uvidíte seznam nastavení vašeho gridu:

Pojďme si pro zobrazení vybrat první možnost Show track sizes, která ukazuje velikost tracků:

Pomocí možnosti Show area names lze zobrazit názvy oblastí gridu, pokud jsou nastaveny. A výběrem možnosti Extend grid lines uvidíme prodloužené linie tracků za rámec gridu: