Inspector de CSS Grid: examina la rejilla del layout

El Grid Inspector te permite examinar los CSS Grid Layouts usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.

Cuando un elemento HTML de tu página tiene display: grid aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.

En el panel HTML, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.

En el panel CSS veremos las reglas, cualquier instancia con display: grid declarado tendra un icono de rejilla como este: .

Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:

La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.

Cuando grid esta incluido en la pagina, el panel CSS en la seccion disposición incluye una vista de "Rejilla" esta sección incluye algunas opciones para ver las rejillas. Encontraras mas información acontinuación.

La seccion Rejilla de la vista de disposicion; luce algo así:

Encontraras algunas opciones dentro de este:

• Superponer Rejilla: cuenta con un checkbox para cada una de las rejillas en la pagina, con varias opciones. permitiendo la vista sobrepuesta de estas, asi como activar o desactivar cada una de estas.
• Configuracion de la rejilla :
  • Mostrar números de línea: marca cada linea mostrada en la parte superior e inferior.
  • Mostrar nombres de áreas: mostrara los nombres de las areas, en el caso de que la rejilla cuente con estas (por defecto encima, donde es relevante).
  • Extender líneas infinitamente: por defecto, las lineas de la rejilla/tracks son visibles solamente dentro del elemento con la propiedad display: grid en él; cuando activamos esta opción, las lineas de la rejilla se extenderan hasta el limite del viewport en ambos ejes
• Mini vista de Rejilla: Una vista miniatura de la rejilla activa.

Examinemos estas carácteristicas más a detalle.

Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":

Cada entrada consiste en (de izquierda a derecha):

• Un checkbox que te permite activar y desactivar la sobreposicion de la rejilla. ten en cuenta que solo puedes ver una rejilla a la vez.
• Una etiqueta que representa la rejilla, constando de un selector de un elemento HTML al cual le fue aplicada la propiedad rejilla. al dar click sobre esta tambien puedes activar o desactivar la superposición.
• Un icono de objetivo que al momendo de dar click sobre él seleccionaras el elemento al que la rejilla esta asociada, dentro del panel HTML.
• Un icono selector de color que te permitira cambiar el color primario de la rejilla superpuesta. Esto es sumamente util para seleccionar colores  asi podras ver facilmente las secciones de tu rejilla.

Por defecto, los números de linea se muestran sobre la rejilla superpuesta.

Al desactivarla opcion "Mostrar números de línea" lucira así.

En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.

Al desactivar la opción "Mostrar nombres de áreas" lucira así.

Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con display: grid.

Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.

Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.

posicionandote sobre cada una de las diferentes areas de la mini rejilla lograras que su equivalente en la rejilla superpuesta sea iluminada tambien, asi como mostrara tambien un tooltip con informacion como el número de colomna, fila y las dimenciones del area.

• labs.jensimmons.com — algunos ejercicios interesantes de rejillas.
• Grid by Example — estudiando los recursos de CSS Grid de Rachel Andrew.
• CSS Grid Layout — MDN CSS Grid Layout rreferencias y tutoriales.