Visning av CSS-grid i nettleserens debugger
Når man jobber med grid under utforming av nettsteder kan det være nødvendig å kontrollere hvor korrekt plasseringen av elementer i gridet skjer. I tillegg, hvis vi har gjort en feil, må vi finne ut hvilket element som forårsaker feil plassering. For dette formålet kan vi bruke debuggeren i nettleseren.
La oss se på et grid ved hjelp av debuggeren i Chrome.
Først velger vi objektet vi er interessert i
som har grid, og ved å høyreklikke velger vi
alternativet 'Inspiser' fra listen:
Nå, i panelet som åpnet seg til høyre i nettleseren, fører vi
musepekeren over grid-objektet vårt og legger merke til at
det ved siden av foreldreelementet finnes en
knapp merket grid:
Etter at vi har klikket på knappen grid, vil vi se at
vårt objekt vises i et visuelt forståelig grid-system,
med nummerering på alle kolonner og rader:
Vennligst ta nå en titt på panelet i debuggeren.
I dette panelet er det faner som
Styles, Computed, Layout og andre.
Bytt fra fanen
Styles, som er aktiv som standard, til fanen Layout.
Du vil se
en liste med innstillinger for gridet ditt:
La oss velge den første
innstillingen Show track sizes for visning, som viser
størrelsen på sporene:
Med innstillingen Show area names
kan man vise navnene på grid-områdene,
hvis de er definert. Og ved å velge innstillingen Extend grid lines
vil vi se linjene for sporene forlenget utenfor gridets rammer:
