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.

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

En el panel CSS

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

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

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

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

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í:

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

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.

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":

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

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.

A CSS grid overlay with grid line numbers displayed

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

A CSS grid overlay with grid line numbers not displayed

Mostrar nombres de áreas

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

A CSS grid overlay with named area names displayed

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

A CSS grid overlay with named area names not displayed

Extender líneas infinitamente

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

A CSS grid overlay with grid lines not extended infinitely

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

A CSS grid overlay with grid lines extended infinitely

Mini vista de Rejilla

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

A mini CSS grid view from the Firefox DevTools

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.

A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

Mira tambien

Etiquetas y colaboradores del documento

Colaboradores en esta página: welm
Última actualización por: welm,