Brauzer sazlawçysynda grid-leriň görkezilmegi

Web sahypasyny dizaýn etmek prosesinde grid-ler bilen işleýänimizde, elementleriň grid şebekesinde dogry ýerleşdirilýändigini barlamak gerek bolup biler. Şeýle hem, eger bir ýalňyşlyk edilse, haýsy elementden ýalňyş ýerleşişiň başlanýandygy anyklamaly bolar. Bu maksat üçin brauzeriň sazlawçysyny ulanyp bilýäris.

Geliň, brauzer sazlawçysyndaky grid-i Chrome brauzeriniň mysalynda gözden geçireýäris. Ilki bilen, biziň gyzyklanýan grid-e eýe bolan obýekti saýlaýarys we çyngyr tyşpan düwmä basyp, sanawdan 'Koda seret' opsionyny saýlaýarys:

Indi brauzeriň sag tarapynda açylan panelde, grid obýektimize kursor getirýäris we enýe elementiň gapdalyndaky hatarda grid düwmesi bardygyna üns berýäris:

grid düwmesine basanyňyzdan soň, obýektimiziň görnüşli we düşnükli grid ulgamynda, ähli sütünleriň we hatarlaryň belgileri bilen görkezilýändigini göreris:

Indi sazlawçynyň paneline üns beriň. Onda Styles, Computed, Layout we başga goşmaça goňşylyklar ýerleşdirilen. Deslapky ýagdaýynda işjeň bolan Styles goňşylygyndan Layout goňşylygyna geçiň. Siz grid-iňiziň sazlamalarynyň sanawyny görersiňiz:

Geliň, görkezmek üçin ilkinji opsiony Show track sizes saýlaýarys, bu track-leriň ölçeglerini görkezýär:

Show area names opsiony bilen grid meýdanlarynyň atlary görkezilip bilner, eger olar berlen bolsa. Extend grid lines opsionyny saýlap biz grid-iň çäklerinden daşary uzaldylan track çyzyklaryny göreris: