Brauzer debuggerida Gridlarni ko'rsatish

Veb-sayt layouti yaratishda gridlar bilan ishlaganda, elementlarning setkada to'g'ri joylashganligini tekshirish kerak bo'ladi. Bundan tashqari, agar xatolik qilgan bo'lsak, qaysi element noto'g'ri joylashayotganini aniqlashimiz kerak. Buning uchun biz brauzerdagi debuggerdan foydalanishimiz mumkin.

Keling, Chrome brauzeridagi debugger misolida gridni ko'rib chiqaylik. Avvalo, bizni qiziqtirgan grid ob'ektini tanlab, o'ng tugmachani bosib, ro'yxatdan 'Inspect' opsiyasini tanlaymiz:

Endi, ochilgan brauzerning o'ng panelida kursorni bizning grid ob'ektimizga olib boramiz va ota element yonidagi satrda grid tugmasi borligini payqaymiz:

grid tugmasini bosganimizdan so'ng, biz ob'ektimiz vizual ravishda tushunarli grid tizimida ko'rinishini, barcha ustunlar va qatorlarning raqamlari ko'rsatilgan holda ko'ramiz:

Endi debuggerdagi panelga e'tibor bering. Unda Styles, Computed, Layout va boshqalar tablari mavjud. Standart aktiv bo'lgan Styles tabidan, Layout tabiga o'ting. Siz o'zingizning grid sozlamalaringiz ro'yxatini ko'rasiz:

Keling, treklar o'lchamini ko'rsatadigan birinchi Show track sizes opsiyasini ko'rsatish uchun tanlaymiz:

Show area names opsiyasi yordamida grid sohalari nomlarini, agar ular belgilangan bo'lsa, ko'rsatish mumkin. Extend grid lines opsiyasini tanlab esa biz grid chegarasidan tashqariga cho'zilgan trek chiziqlarini ko'ramiz: