El Visualitzador de Grid/Flex detecta tots els contenidors CSS Grid i Flexbox d'una pàgina web i en renderitza l'estructura del disseny com a superposicions de colors directament sobre la pàgina. Mira les línies de la quadrícula, les mides de les pistes, els valors dels buits (gaps), les direccions de flexió, els eixos d'alineació i la mida dels elements fills — tot visualitzat sense obrir les DevTools.
CSS Grid i Flexbox són els fonaments del disseny web modern, però per defecte són invisibles. No pots veure les línies de la quadrícula, els eixos flex o els valors dels buits només mirant una pàgina. Les eines per a desenvolupadors del navegador ofereixen algunes funcions de superposició de quadrícula, però requereixen que primer trobis el contenidor al panell d'Elements, activis la superposició manualment i només mostren un contenidor a la vegada. El Visualitzador de Grid/Flex ho automatitza completament: escaneja la pàgina, troba cada contenidor Grid i Flex i en renderitza l'estructura del disseny com a superposicions visuals. Els contenidors Grid mostren línies de columnes i files amb les mides de les pistes etiquetades. Els contenidors Flex mostren la direcció de l'eix principal, l'alineació de l'eix transversal i com es distribueix l'espai. Els buits estan ressaltats amb bandes de colors que mostren els seus valors en píxels. Fes clic a qualsevol contenidor per veure un panell de propietats detallat amb cada propietat de disseny llistada.
Els contenidors Grid mostren línies de colors per a cada pista de fila i columna. Les mides de les pistes (1fr, auto, 200px) s'etiqueten a cada línia. Les àrees de buit estan ressaltades amb bandes semitransparents que mostren el valor del buit en píxels. Les pistes implícites i explícites es distingeixen per línies sòlides vs. discontínues.
Els contenidors Flex mostren l'eix principal com una fletxa (row, row-reverse, column, column-reverse) i l'eix transversal perpendicular a aquest. justify-content i align-items es visualitzen amb indicadors d'alineació etiquetats que mostren com es distribueix l'espai entre els fills.
L'eina escaneja automàticament tota la pàgina i troba cada element amb display: grid o display: flex (incloses les variants inline). Un comptador d'insígnia mostra el nombre total detectat. No cal seleccionar manualment els elements: es troben i es llisten tots automàticament.
Fes clic a qualsevol contenidor per veure les seves propietats de disseny completes: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap i totes les propietats de mida dels fills (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Cada element fill dins d'un contenidor Grid o Flex mostra la seva mida de renderització real, els valors de flex-grow/shrink i la col·locació de l'àrea de la quadrícula. Mira exactament quant d'espai ocupa cada fill i per què.
Detecta contenidors Grid i Flex niuats dins d'altres contenidors Grid/Flex. La superposició renderitza cada nivell de niuament amb colors diferents perquè puguis veure la jerarquia completa del disseny.
Una columna de la quadrícula és més ampla o estreta del que s'esperava? La superposició mostra les mides reals de les pistes (1fr resolt a 342px, auto resolt a 156px) perquè puguis veure exactament com el navegador ha calculat les mides.
Per què un fill flex és més ample que un altre? El visualitzador mostra els valors de flex-grow, flex-shrink i flex-basis per a cada fill, fent visible la lògica de distribució de l'espai.
Canvia la mida del navegador i observa com s'actualitza la superposició de la quadrícula en temps real. Mira com grid-template-columns canvia d'"1fr 1fr 1fr" a l'escriptori a "1fr" al mòbil, i verifica la transició a cada punt de ruptura (breakpoint).
Visita llocs web ben construïts i mira com utilitzen els dissenys Grid i Flex en producció. Les superposicions visuals fan que conceptes abstractes (unitats fr, auto-fit, justify-content) siguin tangibles i interactius.
Comprova que totes les quadrícules de targetes d'una pàgina utilitzin el mateix recompte de columnes i valors de buit. La superposició fa que les inconsistències siguin visibles immediatament — veure una secció que utilitza un buit de 20px mentre que una altra n'utilitza un de 24px és obvi a simple vista.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Visualitzador de Grid/Flex. L'eina escaneja la pàgina i detecta tots els contenidors Grid i Flex.
Cada contenidor Grid i Flex rep una superposició de vora de color. Un panell llista tots els contenidors detectats amb el seu tipus (Grid o Flex) i el selector d'elements.
Fes clic a qualsevol contenidor per veure les seves propietats de disseny completes. Els contenidors Grid mostren les línies i mides de les pistes; els Flex mostren les direccions dels eixos i l'alineació.
Cada element fill mostra la seva mida computada i les propietats específiques del disseny (flex-grow, grid-area). Entén com es distribueix l'espai entre els fills.
Torna a fer clic a la icona de l'eina per eliminar totes les superposicions i tornar a la vista normal de la pàgina.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
