Браузердің жөндеу құралында гридтерді көрсету

Сайтты жасау процесінде гридтермен жұмыс істеген кезде желідегі элементтердің орналасуының қаншалықты дұрыс екенін тексеру қажет болады. Сонымен қатар, егер бізде қателік жіберілсе, қай элементтен бастап дұрыс емес орналасу басталғанын анықтауымыз керек. Бұл мақсатта біз браузердегі жөндеу құралын пайдалана аламыз.

Chrome браузеріндегі жөндеу құралын пайдаланып, гридті мысал ретінде қарастырайық. Алдымен бізді қызықтыратын гридтік объектіні таңдап, тінтуірдің оң жақ түймешігімен басып, тізімнен 'Кодты қарау' опциясын таңдаймыз:

Енді браузердің оң жағында ашылған панельде курсорды біздің гридтік объектімізге апарып, ана элементтің жанындағы жолда grid түймешігі бар екенін байқаймыз:

grid түймешігін басқаннан кейін, біз объектіміздің гридтік жүйеде визуалды түрде түсінікті көрінетінін, барлық бағандар мен қатарлардың нөмірленуі көрсетілгенін көреміз:

Енді жөндеу құралындағы панельге назар аударыңыз. Онда Styles, Computed, Layout және т.б. қойындылар орналасқан. Әдепкі бойынша белсенді болып тұрған Styles қойындысынан Layout қойындысына ауысыңыз. Сіз гридің параметрлер тізімін көресіз:

Тректердің өлшемін көрсететін Show track sizes опциясын көрсету үшін таңдайық:

Show area names опциясын пайдаланып грид аймақтарының атауларын көрсетуге болады, егер олар белгіленген болса. Ал Extend grid lines опциясын таңдасақ, грид шеңберінен тыс жатқан трек сызықтарын көреміз: