Võrgu (grid) kuvamine brauseri silumistööriistas

Võrkudega (grid) töötamisel veebilehe kujundusprotsessis võib tekkida vajadus kontrollida, kui õigesti paigutatakse elemendid võrku. Lisaks, kui oleme teinud vea, peame välja selgitama, millisest elemendist algab vale paigutus. Selleks eesmärgiks saame kasutada brauseris sisaldub silumistööriist.

Vaatame võrku näiteks Chrome'i brauseri silumistööriistaga. Kõigepealt valime meid huvitava objekti võrguga ja paremklõpsates valime loendist valiku 'Inspect':

Nüüd brauseris paremal avanud paanil suuname kursori oma võrguga objekti peale ja märkame, et vanemaelemendi kõrval olevas real asub nupp grid:

Pärast nupu grid vajutamist näeme, et meie objekt kuvatakse visuaalselt arusaadavas võrgu süsteemis, koos kõigi tulpade ja ridade nummerdusega:

Nüüd pöörake tähelepanu silumistööriista paanile. Selles asuvad vahekaardid Styles, Computed, Layout jne. Lülituge vahekaardilt Styles, mis on vaikimisi aktiivne, ümber vahekaardile Layout. Te näete oma võrgu seadete loendit:

Valime kuvamiseks esimese valiku Show track sizes, mis näitab radade (track) suurusi:

Valikuga Show area names saab kuvada võrgu alade nimesid, kui need on määratud. Valides valiku Extend grid lines näeme võrgu raamidest kaugemale jätkuvaid radu (track) jooni: