Inspección de diseños de CSS Grid

Use la pestaña Diseño de la herramienta Elementos para identificar cuadrículas CSS en un sitio web y depurar problemas de diseño de cuadrícula mediante superposiciones de cuadrícula personalizables.

Contenido detallado:

• Mostrar la superposición de cuadrícula en una página web representada
• Alinear elementos de cuadrícula y su contenido: el elemento emergente del editor de cuadrícula
• Opciones de visualización de cuadrícula
• Superposición de la configuración de pantalla
  • Mostrar números de línea
  • Ocultar etiquetas de línea
  • Mostrar nombres de línea
  • Mostrar tamaños de pista
  • Mostrar nombres de área
  • Extender líneas de cuadrícula
• Superposiciones de cuadrícula
  • Habilitar vistas superpuestas de varias cuadrículas
  • Personalización del color de superposición de cuadrícula
  • Resaltar el elemento grid en la página web y el árbol DOM
• Ver también

Mostrar la superposición de cuadrícula en una página web representada

CSS Grid es un paradigma de diseño eficaz para la web. Una buena página web para obtener información sobre CSS Grid y sus características es el diseño de cuadrícula CSS en MDN.

Para usar la superposición de cuadrícula en una página web representada:

1. Vaya a una página que use el diseño de CSS Grid, como la página de demostración Inspeccionar diseños de CUADRÍCULA CSS , en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools, con la herramienta Elementos seleccionada, que muestra el árbol DOM.

3. En el árbol DOM, expanda el cuerpo>principal.

   Los <div> elementos tienen un distintivo de cuadrícula :

   

   Cuando un elemento HTML de la página web tiene o display: inline-grid se le aplicadisplay: grid, se muestra un distintivo de cuadrícula junto al elemento en el árbol DOM de la herramienta Elementos.

4. Haga clic en el distintivo de cuadrícula junto a un elemento, como <div class="fruit-box">:

   

   Se muestra una superposición de cuadrícula sobre el elemento de la página web representada. El distintivo de cuadrícula cambia de texto azul en fondo blanco a texto blanco en fondo azul.

   En la página web representada, la superposición de CSS Grid aparece en una capa delante del elemento de página web. La superposición de CSS Grid muestra la posición de las líneas de cuadrícula (filas y columnas) y las pistas.

   Si hace clic en el distintivo de cuadrícula varias veces, se activa y desactiva.

   De forma similar, a veces hay una notificación de subcuadrícula . Puede alternar la superposición de GSS Grid en una subcuadrícula haciendo clic en el distintivo de subcuadrícula . Consulte Subgrid en MDN.

5. Haga clic en la pestaña Diseño , que se agrupa con la pestaña Estilos de la herramienta Elementos :

   

   La pestaña Diseño incluye una sección Grid/Grid Lanes , que incluye:

   • Lista desplegable.
   • Casillas para las opciones de visualización.
   • Casilla para cada elemento que usa el diseño de CSS Grid.

   Cuando una página web usa una cuadrícula CSS, la pestaña Diseño incluye la sección Grid/Grid Lanes . Use la sección Grid/Grid Lanes para configurar la información que se va a mostrar en las superposiciones de cuadrícula en la página web representada.

Alinear elementos de cuadrícula y su contenido: el elemento emergente del editor de cuadrícula

Puede alinear los elementos de cuadrícula CSS y su contenido haciendo clic en un botón (para abrir el elemento emergente del editor de cuadrícula), en lugar de tener que definir directamente reglas CSS.

Para alinear elementos de cuadrícula CSS y su contenido:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

   Como resultado, se selecciona la pestaña Diseño para un elemento del árbol DOM (como <div class="fruit-box">) que tiene un distintivo de cuadrícula .

2. Seleccione la pestaña Estilos .

3. Busque una regla CSS que tenga el botón Abrir editor de cuadrícula , como la .fruit-box regla :

   

4. En la regla CSS, junto a display: grid, haga clic en el botón Abrir editor de cuadrícula .

   Se abre el menú emergente del editor de cuadrícula :

   

   El elemento emergente del editor de cuadrícula contiene cuatro conjuntos de botones como opciones:

   • align-content
   • justify-content
   • align-items
   • justify-items

   Dentro de cada conjunto de botones, los botones son botones de opción mutuamente excluyentes. Si hace clic dos veces en un botón de opción, no se selecciona ningún botón de opción en ese conjunto y el valor vuelve a la normalidad.

5. En el menú emergente del editor de cuadrícula , en cualquier conjunto de botones, haga clic en un botón. Para volver a la normalidad, haga clic dos veces en un botón.

   El color de primer plano del botón cambia de negro a azul y el valor cambia de normal al valor seleccionado.

   Los elementos de cuadrícula y el contenido se vuelven a representar en la ventanilla.

Opciones de visualización de cuadrícula

La sección Grid/Grid Lanes del panel Diseño contiene dos subsecciones:

• Superposición de la configuración de pantalla
• Superposiciones de cuadrícula

A continuación se detallan los detalles.

Superposición de la configuración de pantalla

En el panel Diseño de la herramienta Elemento, en la sección Cuadrícula expandible/Líneas de cuadrícula, hay una subsección Superposición de configuración de pantalla:

La subsección Superposición de configuración de pantalla consta de dos partes:

• Lista desplegable que contiene los siguientes comandos:

  • Ocultar etiquetas de línea : oculte las etiquetas de línea para cada superposición de cuadrícula.
  • Mostrar números de línea : muestra los números de línea para cada superposición de cuadrícula (seleccionada de forma predeterminada).
  • Mostrar nombres de línea : muestra los nombres de línea de cada superposición de cuadrícula en el caso de las cuadrículas con nombres de línea.

• Casillas:

  • Mostrar tamaños de pista : alternar para mostrar u ocultar tamaños de pista.
  • Mostrar nombres de área : alternar para mostrar u ocultar nombres de área, en el caso de cuadrículas con áreas de cuadrícula con nombre.
  • Extender líneas de cuadrícula : de forma predeterminada, las líneas de cuadrícula solo se muestran dentro del elemento que tiene display: grid o display: inline-grid se establecen en él. Al activar esta opción, las líneas de cuadrícula se extienden hasta el borde de la ventanilla a lo largo de cada eje.

A continuación se detallan los detalles.

Mostrar números de línea

Puede mostrar u ocultar números de línea (filas y columnas) en la superposición de cuadrícula en la página web representada. En CSS Grid, los números de línea se usan para identificar las líneas verticales y horizontales que separan filas y columnas de una cuadrícula CSS. Estos números de línea no son para las líneas de código del archivo de origen HTML.

Para mostrar u ocultar números de línea (filas y columnas) en la superposición de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la sección >Cuadrícula/Líneas de cuadrículaSuperposición de la subsección >Mostrar etiquetas de línea lista desplegable, seleccione Mostrar números de línea. Esta opción está seleccionada de forma predeterminada.

   Se muestran los números de las líneas (filas y columnas) de cada superposición de cuadrícula:

   

De forma predeterminada, los números de línea positivos y negativos (filas y columnas) se muestran en la superposición de cuadrícula. Para obtener información sobre los números negativos en la superposición de cuadrícula, vea Contar hacia atrás en diseño de cuadrícula mediante la selección de ubicación basada en líneas en MDN.

Ocultar etiquetas de línea

Para ocultar las etiquetas de línea en la superposición de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la sección >Cuadrícula/Carriles de cuadrículaSubsección Superposición de la subsección >Mostrar etiquetas de línea lista desplegable, seleccione Ocultar etiquetas de línea:

   

   Las etiquetas de las líneas (filas o columnas) están ocultas, en cada superposición de cuadrícula.

Mostrar nombres de línea

En la superposición de cuadrícula de la página web representada, puede mostrar los nombres de línea. Esto facilita la visualización de la posición inicial y final de un elemento.

Para mostrar los nombres de línea en la superposición de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la sección >Cuadrícula/Líneas de cuadrículaSuperposición de la subsección >Mostrar etiquetas de línea lista desplegable, seleccione Mostrar nombres de línea:

   

   Se muestran los nombres de línea en lugar de los números. Esta opción muestra los nombres de las líneas de cada superposición de cuadrícula, si se proporcionan nombres.

   En el ejemplo anterior, 4 líneas tienen nombres: left, middle1, middle2y right.

   En la demostración, el elemento Orange abarca de izquierda a derecha, mediante grid-column: left reglas CSS y grid-column: right .

Vea también:

• Diseño mediante líneas de cuadrícula con nombre en MDN.

Mostrar tamaños de pista

En la superposición de cuadrícula de la página web representada, puede mostrar los tamaños de seguimiento.

Para mostrar los tamaños de seguimiento en la superposición de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la pestaña Diseño de la herramienta Elementos, en la sección Cuadrícula/Carriles de cuadrícula, en la subsección Cuadrícula/Líneas de cuadrícula superpuestas, active la casilla de cada elemento en el que se va a mostrar la superposición de cuadrícula. Por ejemplo, active la casilla situada junto a div.fruit-box y div.snack-box.

3. En la subsección Configuración de visualización de superposición de la sección >Cuadrícula/Carriles de cuadrícula, active la casilla Mostrar tamaños de pista:

   

Cada etiqueta de línea muestra (authored sizesi se define en CSS) y :computed size

En la demostración, los tamaños de columna se definen de la siguiente manera, en la propiedad grid-template-columnsCSS :

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

Etiquetas de columna:

Las siguientes etiquetas de línea de tamaño de pista se muestran en las columnas de cuadrícula, para el elemento <div class="snack-box">de la demostración :

Si la pantalla del equipo se establece en una densidad de píxeles diferente, la demostración podría generar valores diferentes, como la mitad de los píxeles.

La etiqueta de línea de cada columna de cuadrícula muestra authored size además de , computed sizeporque los tamaños de columna se han creado (especificado), en la propiedad grid-template-columns CSS de la hoja de estilos CSS.

Etiquetas de fila:

Las siguientes etiquetas de línea de tamaño de pista se muestran en las filas de cuadrícula, para el elemento <div class="snack-box">de la demostración :

Si la pantalla del equipo se establece en una densidad de píxeles diferente, la demostración podría generar valores diferentes, como la mitad de los píxeles.

La etiqueta de línea de cada fila de cuadrícula no muestra , authored sizesolo , computed sizeporque los tamaños de fila no se han creado (especificado) en la propiedad grid-template-rows CSS de la hoja de estilos CSS.

Vea también:

• grid-template-columns en MDN.
• grid-template-rows en MDN.

Mostrar nombres de área

En la superposición de cuadrícula de la página web representada, puede mostrar nombres de área, como top, bottom1 e bottom2.

Para mostrar los nombres de área:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la subsección Configuración de visualización de superposición de la sección >Cuadrícula/Carriles de cuadrícula, active la casilla Mostrar nombres de área:

   

Extender líneas de cuadrícula

Puede extender las líneas de cuadrícula de la superposición de cuadrícula al borde de la ventanilla, a lo largo de cada eje.

Para ampliar las líneas de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la subsección Configuración de visualización de superposición de la sección >Cuadrícula/Carriles de cuadrícula, active la casilla Extender líneas de cuadrícula:

   

Superposiciones de cuadrícula

En la pestaña Diseño de la herramienta Elementos (agrupada con la pestaña Estilos), la sección Cuadrícula/Líneas de cuadrícula contiene una lista de elementos que tienen una cuadrícula CSS. Cada cuadrícula tiene casilla, junto con varias opciones.

Habilitar vistas superpuestas de varias cuadrículas

Para habilitar vistas superpuestas de varias cuadrículas:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la subsección >Cuadrícula/Carriles de cuadrícula/ Líneas de cuadrícula superpuestas, active la casilla situada junto a cada nombre de varias cuadrículas:

   

   Se muestra una superposición de CSS Grid para cada elemento seleccionado que tiene una cuadrícula CSS. En el ejemplo anterior, se habilitan tres superposiciones de cuadrícula. Cada cuadrícula CSS tiene un color diferente en la página web representada:

   • body - la superposición de cuadrícula dorada.
   • div.fruit-box - la superposición de cuadrícula rosa.
   • div.snack-box - la superposición de cuadrícula azul.

Personalización del color de superposición de cuadrícula

Para personalizar el color de superposición de cuadrícula:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la subsección >Cuadrícula/Carriles de cuadrícula/Líneas de cuadrícula superpuestas, haga clic en el cuadro Elegir el color de superposición de este elemento junto a un nombre de elemento:

   

   Se abre el selector de colores.

Vea también:

• Cambie los colores con el selector de colores en lareferencia de características CSS.

Resaltar el elemento grid en la página web y el árbol DOM

Para cualquier elemento que tenga un diseño de cuadrícula CSS, puede desplazarse automáticamente hasta el elemento de la página web representada y seleccionar automáticamente el elemento en el árbol DOM.

Para desplazarse a un elemento con cuadrícula en la página web y seleccionar el elemento en el árbol DOM:

1. Realice los pasos descritos en Mostrar la superposición de cuadrícula en una página web representada anteriormente.

2. En la subsección >Cuadrícula/Carriles de cuadrícula/ Líneas de cuadrícula superpuestas, haga clic en el botón Mostrar elemento del panel Elementos () junto a un nombre de elemento:

   

   • La página web representada se desplaza al elemento que usa el diseño de cuadrícula CSS y el elemento se resalta brevemente en la página web representada.

   • En la herramienta Elementos , el árbol DOM se desplaza automáticamente al elemento y el elemento está seleccionado.

   Este desplazamiento y resaltado automáticos funcionan independientemente de si la casilla del elemento está seleccionada o desactivada.

Vea también

Páginas web de demostración:

• Inspección de diseños de CSS Grid

MDN:

• Diseño de cuadrícula CSS
  • Diseño de cuadrícula mediante la selección de ubicación basada en líneas
  • Diseño mediante líneas de cuadrícula con nombre
• grid-template-columns
• grid-template-rows

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.