Браузердин дебаггеринде гриддерди көрсөтүү
Вебсайтты версткалоо процессинде гриддер менен иштөөдө элементтер тордо туура жайгаштырылып жатканын текшерүү керек болот. Кошумча, эгер ката кетирсек, кайсы элементтен туура эмес жайгашуу башталганын аныктоого туура келет. Бул максатта биз браузердин ичиндеги дебаггерди колдоно алабыз.
Келгиле, Chrome браузериндеги дебаггер мисалында гридди карап көрөлү.
Алгач бизди кызыктырган грид объектисин тандап,
чычкандын оң баскычы менен чыкылдатып,
тизмеден 'Кодду көрүү' опциясын тандайбыз:
Азыр браузердин оң жагында ачылган панелде
биздин грид объектисине курсорду алып келип көрөбүз,
ата-эне элементинин жанындагы сапта
grid баскычы бар экенин байкайбыз:
grid баскычын баскандан кийин, биз көрөбүз,
биздин объект визуалдык түшүнүктүү грид системасында көрсөтүлгөн,
бардык тилкелердин жана катарлардын номери көрсөтүлгөн:
Азыр дебаггердин панелине көңүл буруңуз.
Анда Styles, Computed, Layout жана башка
кошумчалар жайгашкан.
Демейки жактан активдүү болгон
Styles кошумчасынан Layout кошумчасына которулуңуз.
Сиз өзүңүздүн гридиңиздин жөндөөлөрүнүн тизмесин көрөсүз:
Көрсөтүү үчүн биринчи опцияны
Show track sizes тандайлы, ал
трэктердин өлчөмүн көрсөтөт:
Show area names опциясынын жардамы менен
грид аянттарынын аттарын көрсөтсө болот,
эгер алар белгиленсе. Extend grid lines опциясын тандап,
биз гриддин чектеринен тышкары созулган трэк сызыктарын көрөбүз:
