Zobrazenie gridov v ladiacom nástroji prehliadača

Pri práci s gridmi počas tvorby layoutu webstránky môže byť potrebné skontrolovať, či prebieha umiestňovanie prvkov v sieti správne. Okrem toho, ak sme urobili chybu, musíme zistiť, od ktorého prvku začalo nesprávne umiestnenie. Na tento účel môžeme použiť ladiaci nástroj v prehliadači.

Pozrime sa na grid na príklade ladiacieho nástroja v prehliadači Chrome. Najprv vyberieme objekt, ktorý nás zaujíma, s gridom a kliknutím pravým tlačidlom myši vyberieme z ponuky možnosť 'Inspect':

Teraz na paneli, ktorý sa otvoril na pravej strane prehliadača, prejdeme kurzorom nad náš objekt s gridom a všimneme si, že v riadku vedľa nadradeného prvku sa nachádza tlačidlo grid:

Po kliknutí na tlačidlo grid uvidíme, že náš objekt sa zobrazí vo vizuálne zrozumiteľnej grid sieti, s vyznačením číslovania všetkých stĺpcov a riadkov:

Teraz venujte pozornosť panelu v ladiacom nástroji. Sú na ňom umiestnené záložky Styles, Computed, Layout a ďalšie. Prepnite sa zo záložky Styles, ktorá je predvolene aktívna, na záložku Layout. Uvidíte zoznam nastavení vášho gridu:

Vyberme pre zobrazenie prvú možnosť Show track sizes, ktorá zobrazuje veľkosť trackov:

Pomocou možnosti Show area names je možné zobraziť mená oblastí gridu, pokiaľ sú nastavené. A výberom možnosti Extend grid lines uvidíme predĺžené línie trackov za rámec gridu: