Inspector de layout para Flexbox y Grid

Chrome DevTools marca los contenedores flex con una insignia "flex" junto a su nodo DOM en el panel Elements. Al hacer clic en la insignia se activa o desactiva la superposición de Flexbox: líneas de colores que muestran el eje principal, el eje transversal, los límites de los elementos y el espaciado entre ellos.

Los contenedores Grid muestran una insignia "grid". Al hacer clic en ella se activa o desactiva la superposición de la cuadrícula: líneas de colores para las columnas, las filas y los espacios. Las superposiciones persistentes (fijadas en el panel Layout) permanecen visibles al desplazarse o cambiar el tamaño del viewport.

DevTools → Elements → la pestaña Layout muestra una lista de todos los contenedores flex y grid de la página. Al hacer clic en el nombre de un contenedor, este se selecciona en el DOM y se activa o desactiva su superposición. Aquí se puede configurar el aspecto de la superposición (color de las líneas, visibilidad de las etiquetas y tamaños de las pistas).

La superposición muestra los nombres y tamaños de las pistas cuando está activada la opción "Show track sizes". Los tamaños intrínsecos (auto, min-content, max-content) y las unidades fraccionarias (fr) muestran sus valores resueltos en píxeles, lo que revela cómo se dividen el espacio disponible las unidades fr.

Seleccione un elemento flex (hijo de un contenedor flex). El panel Styles muestra la expansión de la abreviatura flex: flex-grow, flex-shrink y flex-basis. La superposición resalta el tamaño del elemento en el eje principal, su base y cualquier crecimiento o reducción aplicada.

Los contenedores Grid con grid-template-areas muestran superposiciones de áreas con nombre. Cada región con nombre está etiquetada y diferenciada por colores. Esta visualización facilita verificar que las asignaciones de grid-area coincidan con la plantilla de diseño prevista.

La compatibilidad con subgrid en DevTools distingue visualmente los contenedores subgrid. Sus líneas de track se alinean con los tracks de Grid del contenedor principal; la superposición muestra esta alineación y confirma que los elementos subgrid participan en el sistema de coordenadas del Grid principal.

Los elementos desalineados suelen deberse a valores incorrectos de justify-content, align-items o align-self. La superposición de Flexbox/Grid muestra las posiciones de los elementos respecto a las líneas de los ejes. Pruebe a alternar las propiedades de alineación en el panel Styles y observe los cambios de la superposición en tiempo real.

La superposición representa el espaciado gap como bandas de color entre los elementos. Esto facilita confirmar los valores de gap y determinar si el espaciado proviene de gap (lo correcto) o de margin, que podría colapsar inesperadamente en filas flex.

La superposición de Grid diferencia los tracks implícitos (creados automáticamente para los elementos que desbordan) de los tracks explícitos (definidos en grid-template). Las líneas discontinuas marcan los tracks implícitos. Si el contenido crea tracks implícitos inesperados, la superposición revela inmediatamente el patrón de desbordamiento.

Combine Layout Inspector con Device Mode. Cambie el tamaño de la ventana gráfica y observe cómo flex wrap y los tracks de grid auto-fill/auto-fit se reorganizan en tiempo real. Esto permite detectar antes los problemas del diseño adaptable que cambiar manualmente el tamaño de una ventana del navegador.

¿Qué muestra la superposición de Grid de DevTools que no es visible en la página renderizada?

El inspector de diseño Flexbox y Grid de DevTools visualiza líneas de los ejes, tamaños de los tracks, espaciado gap, áreas con nombre y tracks implícitos mediante superposiciones interactivas. Combinado con el panel Layout para gestionar las superposiciones, hace que depurar diseños CSS complejos sea más rápido e intuitivo que leer únicamente el CSS.