El Visualizador Grid/Flex detecta cada contenedor CSS Grid y Flexbox en una página web y renderiza su estructura de diseño como superposiciones coloridas directamente en la página. Ve líneas de grid, tamaños de track, valores de gap, direcciones flex, ejes de alineación y tamaños de elementos hijos — todo visualizado sin abrir DevTools.
CSS Grid y Flexbox son los cimientos del diseño web moderno, pero son invisibles por defecto. No puedes ver las líneas de grid, los ejes flex o los valores de gap solo mirando una página. Los DevTools del navegador ofrecen algunas funciones de superposición de grid, pero requieren que encuentres el contenedor en el panel de Elementos primero, habilites la superposición manualmente y solo muestres un contenedor a la vez. El Visualizador Grid/Flex automatiza esto por completo — escanea la página, encuentra cada contenedor Grid y Flex, y renderiza su estructura de diseño como superposiciones visuales. Los contenedores Grid muestran líneas de columna y fila con tamaños de track etiquetados. Los contenedores Flex muestran la dirección del eje principal, la alineación del eje cruzado y cómo se distribuye el espacio. Los gaps se resaltan con bandas de color mostrando sus valores en píxeles. Haz clic en cualquier contenedor para ver un panel detallado de propiedades con cada propiedad de diseño listada.
Los contenedores Grid muestran líneas de color para cada track de fila y columna. Los tamaños de track (1fr, auto, 200px) se etiquetan en cada línea. Las áreas de gap se resaltan con bandas semitransparentes mostrando el valor del gap en píxeles. Los tracks implícitos y explícitos se distinguen por líneas sólidas frente a discontinuas.
Los contenedores Flex muestran el eje principal como una flecha (row, row-reverse, column, column-reverse) y el eje cruzado perpendicular. justify-content y align-items se visualizan con indicadores de alineación etiquetados mostrando cómo se distribuye el espacio entre los hijos.
La herramienta escanea automáticamente toda la página y encuentra cada elemento con display: grid o display: flex (incluyendo variantes inline). Un distintivo de conteo muestra el número total detectado. No es necesario seleccionar elementos manualmente — todos se encuentran y listan automáticamente.
Haz clic en cualquier contenedor para ver sus propiedades de diseño completas: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, y todas las propiedades de dimensionamiento de hijos (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Cada elemento hijo dentro de un contenedor Grid o Flex muestra su tamaño renderizado real, valores de flex-grow/shrink y colocación de grid area. Ve exactamente cuánto espacio ocupa cada hijo y por qué.
Detecta contenedores Grid y Flex anidados dentro de otros contenedores Grid/Flex. La superposición renderiza cada nivel de anidamiento con diferentes colores para que puedas ver la jerarquía completa del diseño.
¿Una columna de grid es más ancha o más estrecha de lo esperado? La superposición muestra los tamaños reales de track (1fr resuelto a 342px, auto resuelto a 156px) para que puedas ver exactamente cómo el navegador calculó los tamaños.
¿Por qué un hijo flex es más ancho que otro? El visualizador muestra valores de flex-grow, flex-shrink y flex-basis para cada hijo, haciendo visible la lógica de distribución del espacio.
Redimensiona el navegador y observa cómo la superposición de grid se actualiza en tiempo real. Ve cómo grid-template-columns cambia de "1fr 1fr 1fr" en escritorio a "1fr" en móvil, y verifica la transición en cada breakpoint.
Visita sitios web bien construidos y ve cómo usan los diseños Grid y Flex en producción. Las superposiciones visuales hacen conceptos abstractos (unidades fr, auto-fit, justify-content) tangibles e interactivos.
Verifica que todas las cuadrículas de tarjetas en una página usen el mismo número de columnas y valores de gap. La superposición hace las inconsistencias inmediatamente visibles — una sección usando gap de 20px mientras otra usa 24px es obvia de un vistazo.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Visualizador Grid/Flex. La herramienta escanea la página y detecta todos los contenedores Grid y Flex.
Cada contenedor Grid y Flex obtiene una superposición de borde de color. Un panel lista todos los contenedores detectados con su tipo (Grid o Flex) y selector de elemento.
Haz clic en cualquier contenedor para ver sus propiedades de diseño completas. Los contenedores Grid muestran líneas y tamaños de track; los contenedores Flex muestran direcciones de eje y alineación.
Cada elemento hijo muestra su tamaño calculado y propiedades específicas de diseño (flex-grow, grid-area). Entiende cómo se distribuye el espacio entre los hijos.
Haz clic en el ícono de la herramienta nuevamente para eliminar todas las superposiciones y volver a la vista normal de la página.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
