Gridien näyttö selaimen debuggerissa

Kun työskentelet gridien kanssa verkkosivujen luomisprosessissa, voi olla tarpeen tarkistaa, kuinka oikein elementtien sijoittuminen gridissä tapahtuu. Lisäksi, jos olemme tehneet virheen, meidän on selvitettävä mistä elementistä väärä sijoittuminen lähtee. Tätä tarkoitusta varten voimme käyttää debuggeria selaimessa.

Tarkastellaan gridiä esimerkkinä Chrome-selaimen debugger. Ensin valitsemme kiinnostavan kohteen jossa on grid ja napsauttamalla hiiren oikealla painikkeella valitsemme listasta vaihtoehdon 'Inspect':

Nyt avautuneessa oikealla puolella olevassa selaimen paneelissa siirrämme kursoria gridiä sisältävän kohteen päälle ja huomaamme, että vanhempaelementin viereisellä rivillä on painike grid:

Kun olemme painaneet painiketta grid, näemme, että kohteemme näkyy visuaalisesti ymmärrettävässä grid-järjestelmässä, jossa on kaikkien sarakkeiden ja rivien numerointi:

Kiinnitä nyt huomio debuggerin paneeliin. Siinä on välilehdet Styles, Computed, Layout ja muut. Vaihda Styles-välilehdeltä, joka on oletusarvoisesti aktiivinen, Layout-välilehdelle. Näet listan gridisi asetuksista:

Valitaan näytettäväksi ensimmäinen vaihtoehto Show track sizes, joka näyttää raiteiden koot:

Vaihtoehdolla Show area names voi näyttää gridin alueiden nimet, jos ne on määritetty. Ja valitsemalla vaihtoehdon Extend grid lines näemme raiteiden viivat jatkettuna gridin kehyksen ulkopuolelle: