Tinklelių atvaizdavimas naršyklės derintuve

Dirbant su tinkleliais kuriant svetainę, kartais reikia patikrinti, ar elementai tinklelyje išdėstyti teisingai. Be to, jei padarėme klaidą, turime išsiaiškinti, nuo kurio elemento prasidėjo neteisingas išdėstymas. Šiam tikslui galime naudoti naršyklės derintuvę.

Pažvelkime į tinklelį naudodami Chrome naršyklės derintuvę. Pirmiausia pasirenkame mus dominantį objektą su tinkleliu ir, spustelėję dešiniuoju pelės mygtuku, pasirenkame iš sąrašo parinktį 'Inspect':

Dabar dešinėje atsidariusioje naršyklės skiltyje užvedame žymeklį ant mūsų objekto su tinkleliu ir pastebime, kad eilutėje šalia pagrindinio elemento yra mygtukas grid:

Kai paspausite mygtuką grid, pamatysime, kad mūsų objektas atvaizduojamas vizualiai suprantamoje tinklelio sistemoje, su visų stulpelių ir eilučių numeracija:

Dabar atkreipkite dėmesį į skydelį derintuve. Jame yra skirtukai Styles, Computed, Layout ir kt. Perjunkite iš numatytai aktyvaus skirtuko Styles į skirtuką Layout. Pamatysite savo tinklelio nustatymų sąrašą:

Rodykime pirmąją parinktį Show track sizes, kuri rodo takelių dydžius:

Naudodami parinktį Show area names galima rodyti tinklelio sričių pavadinimus, jei jie nustatyti. O pasirinkus parinktį Extend grid lines pamatysime takelių linijas, pratęstas už tinklelio ribų: