Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
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.
Nota: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons Futurismo y Variations on a grid, y un live llamado grid area example de Rachel Andrew.
Descubriendo CSS grids
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
En el panel HTML, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.
En el panel CSS
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.
La vista de rejilla en la seccion disposición
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.
Nota: la seccion disposición se encuentra abajo en el panel derecho del inspector de elementos. Con lo anterior y con los siguientes screenshots deberias hacerte una idea de donde encontrarlo.
Opciones de Rejilla
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: griden é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.
Nota: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.
Examinemos estas carácteristicas más a detalle.
Superponer Rejilla
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.
Mostrar números de línea
Por defecto, los números de linea se muestran sobre la rejilla superpuesta.
Al desactivarla opcion "Mostrar números de línea" lucira así.
Mostrar nombres de áreas
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í.
Extender líneas infinitamente
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.
Mini vista de Rejilla
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.
Mira tambien
- 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.