Grid/Flex Visualizer detectează fiecare container CSS Grid și Flexbox de pe o pagină web și redă structura lor de layout sub formă de overlay-uri colorate direct pe pagină. Vizualizează linii de grid, dimensiuni de track, valori gap, direcții flex, axe de aliniere și dimensionarea elementelor copil — totul fără a deschide DevTools.
CSS Grid și Flexbox sunt fundațiile layout-ului web modern, dar sunt invizibile în mod implicit. Nu poți vedea linii de grid, axe flex sau valori gap doar privind o pagină. Browser DevTools oferă câteva funcții de overlay pentru grid, dar necesită să găsești mai întâi containerul în panoul Elements, să activezi manual overlay-ul și afișează un singur container odată. Grid/Flex Visualizer automatizează complet acest proces — scanează pagina, găsește fiecare container Grid și Flex și redă structura lor de layout ca overlay-uri vizuale. Containerele Grid afișează linii de coloane și rânduri cu dimensiunile track-urilor etichetate. Containerele Flex afișează direcția axei principale, alinierea axei transversale și modul în care spațiul este distribuit. Gap-urile sunt evidențiate cu benzi colorate care arată valorile lor în pixeli. Apasă pe orice container pentru a vedea un panou detaliat cu toate proprietățile de layout listate.
Containerele Grid afișează linii colorate pentru fiecare track de rând și coloană. Dimensiunile track-urilor (1fr, auto, 200px) sunt etichetate pe fiecare linie. Zonele gap sunt evidențiate cu benzi semi-transparente care arată valoarea gap în pixeli. Track-urile implicite și explicite sunt diferențiate prin linii continue vs. întrerupte.
Containerele Flex afișează axa principală sub formă de săgeată (row, row-reverse, column, column-reverse) și axa transversală perpendiculară pe aceasta. justify-content și align-items sunt vizualizate cu indicatori de aliniere etichetați care arată cum este distribuit spațiul între elementele copil.
Instrumentul scanează automat întreaga pagină și găsește fiecare element cu display: grid sau display: flex (inclusiv variantele inline). Un contor de insignă afișează numărul total detectat. Nu este nevoie să selectezi manual elementele — toate sunt găsite și listate automat.
Apasă pe orice container pentru a vedea proprietățile sale complete de layout: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap și toate proprietățile de dimensionare ale elementelor copil (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Fiecare element copil dintr-un container Grid sau Flex afișează dimensiunea sa reală redată, valorile flex-grow/shrink și plasarea în grid area. Vizualizează exact cât spațiu ocupă fiecare copil și de ce.
Detectează containerele Grid și Flex imbricate în interiorul altor containere Grid/Flex. Overlay-ul redă fiecare nivel de imbricare cu culori diferite, astfel încât să poți vedea ierarhia completă a layout-ului.
O coloană grid este mai lată sau mai îngustă decât era de așteptat? Overlay-ul afișează dimensiunile reale ale track-urilor (1fr rezolvat la 342px, auto rezolvat la 156px), astfel încât să poți vedea exact cum a calculat browserul dimensiunile.
De ce un element copil flex este mai lat decât altul? Visualizer-ul afișează valorile flex-grow, flex-shrink și flex-basis pentru fiecare copil, făcând vizibilă logica de distribuție a spațiului.
Redimensionează browserul și urmărește cum overlay-ul grid se actualizează în timp real. Observă cum grid-template-columns se modifică de la "1fr 1fr 1fr" la desktop la "1fr" pe mobil și verifică tranziția la fiecare breakpoint.
Vizitează site-uri bine construite și observă cum folosesc layout-urile Grid și Flex în producție. Overlay-urile vizuale fac conceptele abstracte (unități fr, auto-fit, justify-content) tangibile și interactive.
Verifică dacă toate grilele de carduri de pe o pagină folosesc același număr de coloane și aceleași valori gap. Overlay-ul face inconsistențele imediat vizibile — o secțiune cu gap de 20px față de alta cu 24px este evidentă dintr-o privire.
Deschide dock-ul flotant DevSuite Pro și apasă pe pictograma Grid/Flex Visualizer. Instrumentul scanează pagina și detectează toate containerele Grid și Flex.
Fiecare container Grid și Flex primește un overlay cu bordură colorată. Un panou listează toate containerele detectate cu tipul lor (Grid sau Flex) și selectorul elementului.
Apasă pe orice container pentru a vedea proprietățile sale complete de layout. Containerele Grid afișează linii de track și dimensiuni; containerele Flex afișează direcțiile axelor și alinierea.
Fiecare element copil afișează dimensiunea sa calculată și proprietățile specifice layout-ului (flex-grow, grid-area). Înțelege cum este distribuit spațiul între elementele copil.
Apasă din nou pe pictograma instrumentului pentru a elimina toate overlay-urile și a reveni la vizualizarea normală a paginii.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
