Браузердаги debug қилиш воситасида гридларни кўриш
Веб-саҳифани верстка қилиш жараёнида гридлар билан ишлаганда, элементлар торда тўғри жойлаштирилган-жойлаштирилмаганини текшириш зарур бўлиши мумкин. Бундан ташқари, агар хатолик қилган бўлсак, қайси элемент нотўғри жойлашганини аниқлашимиз керак. Бу мақсадда биз браузердаги debug қилиш воситасидан фойдаланишимиз мумкин.
Келгила, Chrome браузеридаги debug қилиш воситаси мисолида гридни кўриб чиқайлик.
Аввало бизни қизиктирган грид объектини танлаб, ўнг курсор тугмаси билан босиб, рўйхатдан 'Просмотреть код' опциясини танлаймиз:
Энди очилган браузернинг ўнг панелида бизнинг грид объектимизга курсорни олиб бориб, ота-она элемент ичидаги сатр янида grid тугмаси туришини пайқаймиз:
grid тугмасини босгандан сўнг, бизнинг объектимиз гриднинг визуал тушунарли тизимида, барча устун ва қatorларнинг нумерацияси кўрсатилган холда кўринади:
Энди debug қилиш воситасидаги панелга диққат қилинг.
Унда Styles, Computed, Layout ва бошқалар вкладкалар мавжуд.
Стандарт бўйича фаол бўлган Styles вкладкасидан Layout вкладкасига ўтинг.
Сиз гридингизнинг мосламалар рўйхатини кўрасиз:
Келгила, трек ўлчамларини кўрсатадиги биринчи опция Show track sizes ни кўрсатиш учун танлаймиз:
Show area names опцияси ёрдамида, агар белгиланган бўлса, грид соҳаси номларини кўрсатиш мумкин. Extend grid lines опциясини танласак, биз трек chiziqlarining грид чекларидан ташқарига чўзилганини кўрамиз:
