ბრაუზერის დებაგერში გრიდების ჩვენება

საიტის ვერსტკაში გრიდებთან მუშაობისას ხანდახან საჭიროა შევამოწმოთ რამდენად სწორად ხდება ელემენტების განლაგება ბადეში. გარდა ამისა, თუ ჩვენ დავუშვით შეცდომა, უნდა გავარკვიოთ რომელი ელემენტიდან იწყება არასწორი განლაგება. ამ მიზნისთვის ჩვენ შეგვიძლია გამოვიყენოთ დებაგერი ბრაუზერში.

მოდით განვიხილოთ გრიდი Chrome ბრაუზერის დებაგერის მაგალითზე. თავდაპირველად ვირჩევთ ჩვენთვის საინტერესო ობიექტს გრიდით და მარჯვენა ღილაკით დაწკაპუნებით ვირჩევთ სიიდან ოფციას 'შეხედე კოდს':

ახლა ბრაუზერის მარჯვენა მხარეს გახსნილ პანელში მივუთითებთ კურსორს ჩვენს ობიექტზე გრიდით და შევნიშნავთ, რომ მშობელ ელემენტთან ახლოს მდებარე სტრიქონში არის ღილაკი grid:

მას შემდეგ რაც დააწკაპუნებთ ღილაკს grid, ჩვენ ვნახავთ, რომ ჩვენი ობიექტი ჩვენებისას ვიზუალურად გასაგებ გრიდ სისტემაში, ყველა სვეტის და რიგის ნუმერაციის მითითებით:

ახლა მიაქციეთ ყურადღება დებაგერის პანელს. მასში განთავსებულია ჩანართები Styles, Computed, Layout და სხვა. გადართეთ ჩანართიდან Styles, რომელიც ნაგულისხმევად აქტიურია, ჩანართზე Layout. თქვენ ნახავთ თქვენი გრიდის პარამეტრების სიას:

მოდით ჩვენებისთვის ავირჩიოთ პირველი ოფცია Show track sizes, რომელიც აჩვენებს ტრეკების ზომებს:

ოფციის Show area names დახმარებით შესაძლებელია გრიდის არეების სახელების ჩვენება, თუ ისინი დაყენებულია. ხოლო ოფციის Extend grid lines არჩევით ჩვენ ვნახავთ გრიდის ფარგლებს გარეთ გაშლილ ტრეკების ხაზებს: