Բրաուզերի դեբագերում գրիդների ցուցադրում

Կայքի ձևավորման գործընթացի ընթացքում գրիդների հետ աշխատելիս երբեմն անհրաժեշտ է լինում ստուգել, թե արդյոք տարրերի դասավորությունը ցանցում ճիշտ է կատարվում: Բացի այդ, եթե մենք սխալ ենք թույլ տվել, պետք է հասկանանք, թե որ տարրից է սկսվում սխալ տեղադրումը: Այս նպատակով մենք կարող ենք օգտագործել դեբագերը բրաուզերում:

Եկեք դիտարկենք գրիդը Chrome բրաուզերի դեբագերի օրինակով: Սկզբում ընտրում ենք մեզ հետաքրքրող օբյեկտը գրիդով և աջ սեղմելով ընտրում ենք ցանկից 'Դիտել կոդը' տարբերակը.

Այժմ բրաուզերի աջ կողմում բացված վահանակում դնում ենք կուրսորը մեր գրիդով օբյեկտի վրա և նկատում ենք, որ ծնող տարրի կողքին գտնվող տողում կա grid կոճակ.

grid կոճակը սեղմելուց հետո մենք կտեսնենք, որ մեր օբյեկտը ցուցադրվում է տեսողականորեն հասկանալի գրիդային համակարգում, բոլոր սյուների և շարքերի համարակալմամբ.

Այժմ ուշադրություն դարձրեք դեբագերի վահանակին: Դրանում տեղադրված են ներդիրներ Styles, Computed, Layout և այլն: Փոխարկվեք Styles ներդիրից, որն ընտրված է լռելյայն, Layout ներդիրին: Դուք կտեսնեք ձեր գրիդի կարգավորումների ցանկը.

Եկեք ցուցադրման համար ընտրենք առաջին տարբերակը Show track sizes, որը ցույց է տալիս տրեկների չափերը.

Show area names տարբերակի օգնությամբ կարելի է ցուցադրել գրիդի տարածքների անունները, եթե դրանք նշված են: Իսկ ընտրելով Extend grid lines տարբերակը մենք կտեսնենք գրիդի սահմաններից դուրս երկարացված տրեկների գծերը.