Адлюстраванне грідаў у адладчыку браўзера

Пры рабоце з грідамі ў працэсе вёрсткі сайта бывае трэба праверыць наколькі правільна адбываецца расстаноўка элементаў у сетцы. Акрамя таго, калі ў нас дапушчана памылка мы павінны разабрацца з якога элемента ідзе няправільнае размяшчэнне. Для гэтай мэты мы можам выкарыстоўваць адладчык у браўзеры.

Давайце разгледзім грід на прыкладзе адладчыка ў браўзеры Chrome. Спачатку выбіраем цікаўны для нас аб'ект з грідам і клікнуўшы правай кнопкай мышы выбіраем з спіса опцыю 'Праглядзець код':

Цяпер у адкрыўшейся справа панэлі браўзера наводзім курсор на наш аб'ект з грідам і заўважаем, што ў радку побач з бацькоўскім элементам знаходзіцца кнопка grid:

Пасля таго як націснулі на кнопку grid, мы ўбачым, што наш аб'ект адлюстроўваецца ў візуальна зразумелай сістэме грід, з указаннем нумарацыі ўсіх слупкоў і шэрагаў:

Цяпер звярніце ўвагу на панэль у адладчыку. У ёй размешчаны ўкладкі Styles, Computed, Layout і іншае. Пераключыцеся з укладкі Styles, якая актыўная па змаўчанні, на ўкладку Layout. Вы ўбачыце спіс наладаў вашага гріда:

Давайце выбіраем для адлюстравання першую опцыю Show track sizes, якая паказвае памер трэкаў:

З дапамогай опцыі Show area names можна адлюстраваць імёны абласцей гріда, калі яны зададзены. А выбіраючы опцыю Extend grid lines мы ўбачым прадоўжаныя за рамкі гріда лініі трэкаў: