Visualización de grids en el depurador del navegador

Al trabajar con grids durante el maquetado de un sitio web, a veces es necesario verificar si la colocación de los elementos en la grid se está realizando correctamente. Además, si hemos cometido un error, debemos averiguar desde qué elemento proviene la colocación incorrecta. Para este propósito, podemos utilizar el depurador del navegador.

Veamos una grid usando como ejemplo el depurador del navegador Chrome. Primero, seleccionamos el objeto que nos interesa que tiene la grid, hacemos clic con el botón derecho del ratón y elegimos de la lista la opción 'Inspeccionar':

Ahora, en el panel del navegador que se abre a la derecha, colocamos el cursor sobre nuestro objeto con la grid y observamos que en la línea junto al elemento padre se encuentra el botón grid:

Después de hacer clic en el botón grid, veremos que nuestro objeto se muestra en un sistema de grid visualmente claro, con la numeración de todas las columnas y filas:

Ahora preste atención al panel en el depurador. En él se encuentran las pestañas Styles, Computed, Layout y otras. Cambie de la pestaña Styles, que está activa por defecto, a la pestaña Layout. Verá una lista de configuraciones de su grid:

Seleccionemos para visualizar la primera opción Show track sizes, que muestra el tamaño de las pistas:

Con la opción Show area names se pueden mostrar los nombres de las áreas de la grid, si están definidos. Y al seleccionar la opción Extend grid lines veremos las líneas de las pistas extendidas más allá de los límites de la grid: