Visning af grids i browserens debugger

Når man arbejder med grids under udviklingen af en hjemmeside, kan det være nødvendigt at kontrollere, om placeringen af elementer i griddet foregår korrekt. Derudover, hvis der er en fejl, skal vi finde ud af, hvilket element der forårsager den forkerte placering. Til dette formål kan vi bruge debuggeren i browseren.

Lad os se på et grid ved hjælp af debuggeren i Chrome. Først vælger vi det objekt, der interesserer os, som har et grid, og ved at højreklikke vælger vi indstillingen 'Inspicer' fra listen:

Nu i den panel, der åbnede til højre i browseren, flytter vi markøren over vores objekt med grid og lægger mærke til, at der på linjen ud for forældreelementet er en knap med grid:

Efter at have klikket på knappen grid, vil vi se, at vores objekt vises i et visuelt forståeligt grid-system med nummerering af alle kolonner og rækker:

Vær nu opmærksom på panelet i debuggeren. I det er der faner som Styles, Computed, Layout osv. Skift fra fanen Styles, som er aktiv som standard, til fanen Layout. Du vil se en liste med indstillinger for dit grid:

Lad os vælge den første indstilling Show track sizes for visning, som viser størrelsen på tracks:

Med indstillingen Show area names kan man vise navnene på grid-områder, hvis de er angivet. Og ved at vælge indstillingen Extend grid lines vil vi se tracks' linjer forlænget ud over gridets rammer: