Afișarea gridurilor în instrumentul de dezvoltare al browserului

Când lucrezi cu griduri în procesul de creare a unui site, poate fi necesar să verifici dacă elementele sunt plasate corect în grid. În plus, dacă am făcut o greșeală, trebuie să ne dăm seama de la ce element începe plasarea incorectă. În acest scop, putem folosi instrumentul de dezvoltare din browser.

Să analizăm un grid folosind exemplul instrumentului de dezvoltare din browserul Chrome. Mai întâi selectăm obiectul care ne interesează cu grid, facem clic dreapta și selectăm din listă opțiunea 'Inspectează elementul':

Acum, în panoul care s-a deschis în dreapta browserului, plasăm cursorul peste obiectul nostru cu grid și observăm că în linia de lângă elementul părinte se află butonul grid:

După ce am apăsat pe butonul grid, vom vedea că obiectul nostru este afișat într-un sistem de grid vizual intuitiv, cu indicarea numerotării tuturor coloanelor și rândurilor:

Acum acordați atenție panoului din instrumentul de dezvoltare. În el sunt plasate filele Styles, Computed, Layout și altele. Comutați de la fila Styles, care este activă în mod implicit, la fila Layout. Veți vedea o listă de setări pentru gridul dvs.:

Să selectăm pentru afișare prima opțiune Show track sizes, care arată dimensiunea track-urilor:

Cu ajutorul opțiunii Show area names se pot afișa numele zonelor gridului, dacă acestea sunt definite. Iar dacă selectăm opțiunea Extend grid lines vom vedea liniile track-urilor prelungite în afara cadrului gridului: