Visning av CSS-grid i webbläsarens utvecklarverktyg

När man arbetar med grid under utveckling av en webbplats kan det vara nödvändigt att kontrollera hur korrekt placeringen av element i nätet sker. Dessutom, om vi har gjort ett misstag måste vi ta reda på från vilket element den felaktiga placeringen kommer. För detta ändamål kan vi använda utvecklarverktyget i webbläsaren.

Låt oss titta på ett grid med hjälp av utvecklarverktyget i Chrome. Först väljer vi det objekt som intresserar oss som har grid och genom att högerklicka väljer vi alternativet 'Inspect' från listan:

Nu i den panel som öppnats till höger i webbläsaren för vi musen över vårt grid-objekt och lägger märke till att på raden bredvid föräldraelementet finns en knapp grid:

Efter att vi klickat på knappen grid kommer vi att se att vårt objekt visas i ett visuellt förståeligt grid-system, med numrering av alla kolumner och rader:

Var nu uppmärksam på panelen i utvecklarverktyget. I den finns flikar Styles, Computed, Layout med mera. Byt från fliken Styles, som är aktiv som standard, till fliken Layout. Du kommer att se en lista med inställningar för ditt grid:

Låt oss välja att visa det första alternativet Show track sizes, som visar spårens storlek:

Med alternativet Show area names kan man visa namnen på grid-områdena, om de är angivna. Och genom att välja alternativet Extend grid lines kommer vi att se förlängda spårlinjer utanför grid-ramen: