Grid-ҳоро дар браузери бодидкунанда намоиш додан

Ҳангоми кор бо grid-ҳо дар раванди сохтани лоиҳаи вебсайт, зарурат ба андозаҳои дуруст гузоштани элементҳо дар шабака пайдо мешавад. Илова бар ин, агар мо хатогӣ дошта бошем, бояд муайян кунем, ки аз кадом элемент сар мешавад гузоштани нодуруст. Барои ин мақсад мо метавонем бодидкунандаро дар браузер истифода барем.

Биёед grid-ро дар мисоли бодидкунанда дар браузери Chrome баррасӣ кунем. Аввалан объекти мавриди назари худро бо grid интихоб мекунем ва бо тугмаи рости муш клик карда, аз рӯйхат варианти 'Рамзро дидан'-ро интихоб мекунем:

Акнун дар панели кушодашуда дар тарафи рости браузер курсорро ба объекти мо бо grid мегузорем ва қайд мекунем, ки дар сатр дар наздикии элемент волидайн тугмаи grid ҷойгир аст:

Пас аз он ки тугмаи grid-ро пахш кардем, хоҳем дид, ки объекти мо дар системаи grid-и визуалӣ фаҳмо намоиш дода мешавад, бо ишорати рақамгузории ҳамаи сутунҳо ва сатрҳо:

Акнун ба панел дар бодидкунанда диққат диҳед. Дар он варақаҳо Styles, Computed, Layout ва ғайра ҷойгир шудаанд. Аз варақаи Styles, ки ба таври пешфарз фаъол аст, ба варақаи Layout гузаред. Шумо хоҳед дид рӯйхати танзимоти grid-и худро:

Биёед барои намоиш аввалин варианти Show track sizes-ро интихоб кунем, ки андозаи track-ҳоро нишон медиҳад:

Бо ёрии варианти Show area names метавон номҳои минтақаҳои grid-ро намоиш дод, агар онҳо муайян карда шуда бошанд. Ва варианти Extend grid lines-ро интихоб карда мо хатҳои дарозкардашудаи track-ҳоро аз чорчӯбаи grid хоҳем дид: