Prikazivanje gridova u browser debuggeru
Prilikom rada sa gridovima tokom izrade veb sajta, ponekad je potrebno proveriti da li se elementi pravilno postavljaju u mreži. Pored toga, ako smo napravili grešku, trebalo bi da shvatimo od kog elementa počinje nepravilno pozicioniranje. Za ovu svrhu možemo koristiti debugger u browseru.
Hajde da pogledamo grid na primeru debuggera u browseru Chrome.
Prvo odaberemo objekat koji nas zanima
sa grid-om i kliknemo desnim tasterom miša i izaberemo
iz liste opciju 'Pregledaj kod':
Sada u otvorenoj desnoj panelu browsera prebacimo
kursor na naš objekat sa grid-om i primetićemo da
se u redu pored roditeljskog elementa nalazi
dugme grid:
Nakon što kliknemo na dugme grid, videćemo da se
naš objekat prikazuje u vizuelno razumljivom grid sistemu,
sa naznačenim numeracijama svih kolona i redova:
Sada obratite pažnju na panel u debuggeru.
U njemu se nalaze kartice
Styles, Computed, Layout i druge.
Prebacite se sa kartice
Styles, koja je podrazumevano aktivna, na karticu Layout.
Videćete
listu podešavanja vašeg grid-a:
Hajde da odaberemo za prikaz prvu
opciju Show track sizes, koja prikazuje
veličinu track-ova:
Pomoću opcije Show area names
možemo prikazati imena oblasti grid-a,
ako su zadati. A odabiranjem opcije Extend grid lines
videćemo produžene linije track-ova izvan okvira grid-a:
