En esta guía, se muestra cómo descubrir cuadrículas de CSS en una página, examinarlas y depurar problemas de diseño en el panel Elements de las Herramientas para desarrolladores de Chrome.
Los ejemplos que se muestran en las capturas de pantalla de este artículo pertenecen a estas dos páginas web: Fruit box y Snack box.
Descubre las cuadrículas de CSS
Cuando se aplican display: grid o display: inline-grid a un elemento HTML de tu página, puedes ver la insignia grid junto a él en el panel Elementos.
Haz clic en la insignia para activar o desactivar la visualización de una superposición de cuadrícula en la página. La superposición aparece sobre el elemento, distribuida como una cuadrícula para mostrar la posición de las líneas de cuadrícula y los seguimientos:
Abre el panel Layout. Cuando se incluyen cuadrículas en una página, el panel Diseño incluye una sección Cuadrícula que contiene varias opciones para ver esas cuadrículas.
Alinea los elementos de la cuadrícula y su contenido con el Editor de cuadrículas
Puedes alinear los elementos de la cuadrícula y su contenido con solo hacer clic en un botón en lugar de escribir reglas CSS.
Para alinear los elementos de la cuadrícula y su contenido, haz lo siguiente:
En el panel Elements > Styles, haz clic en el botón
Grid Editor junto a display: grid.
En el editor de cuadrículas, haz clic en los botones correspondientes para establecer las propiedades de CSS
align-*yjustify-*para los elementos de cuadrícula y su contenido.
Observa los elementos y el contenido de la cuadrícula ajustados en el viewport.
Opciones de visualización de cuadrícula
La sección Grid en el panel Layout contiene 2 subsecciones:
- Configuración de pantalla de superposición
- Superposiciones de la cuadrícula
Veamos cada una de estas subsecciones en detalle.
Configuración de pantalla de superposición
La configuración de pantalla de superposición consta de dos partes:
a. Un menú desplegable con las siguientes opciones:
- Ocultar etiquetas de línea: Oculta las etiquetas de línea de cada superposición de la cuadrícula.
- Mostrar números de línea: Muestra los números de línea de cada superposición de la cuadrícula (seleccionado de forma predeterminada).
- Show line names (Mostrar nombres de líneas): Muestra los nombres de las líneas de cada superposición de cuadrícula en el caso de las cuadrículas con nombres de líneas.
b. Casillas de verificación con las siguientes opciones:
- Mostrar tamaños de segmentos: Activa o desactiva la opción para ocultar o mostrar los tamaños de los segmentos.
- Mostrar nombres de áreas: Activa o desactiva los nombres de áreas para ocultar o mostrar, en el caso de cuadrículas con áreas de cuadrícula con nombre.
- Extender las líneas de la cuadrícula: De forma predeterminada, las líneas de cuadrícula solo se muestran dentro del elemento con
display: gridodisplay: inline-gridconfigurados. Cuando activas esta opción, las líneas de cuadrícula se extienden hasta el borde del viewport a lo largo de cada eje.
Examinemos estos parámetros de configuración en más detalle.
Mostrar números de línea
De forma predeterminada, los números de línea positivos y negativos se muestran en la superposición de la cuadrícula.
Ocultar etiquetas de línea
Selecciona Ocultar etiquetas de línea para ocultar los números de línea.
Mostrar nombres de línea
Puedes seleccionar Mostrar nombres de línea para ver los nombres de las líneas en lugar de los números. En este ejemplo, tenemos cuatro líneas con nombres: left, middle1, middle2 y right.
En esta demostración, el elemento naranja se extiende de izquierda a derecha, con CSS grid-column: left / right.
Cuando se muestran los nombres de las líneas, es más fácil visualizar la posición inicial y final del elemento.
Mostrar tamaños del segmento
Habilita la casilla de verificación Mostrar tamaños de seguimiento para ver los tamaños de seguimiento de la cuadrícula.
Las Herramientas para desarrolladores mostrarán [authored size] - [computed size] en cada etiqueta de línea: Tamaño de creación: el tamaño definido en la hoja de estilo (se omite si no está definido). Tamaño calculado: Es el tamaño real en la pantalla.
En esta demostración, los tamaños de la columna snack-box se definen en el grid-template-columns:1fr 2fr; de CSS.
Por lo tanto, las etiquetas de las líneas de las columnas muestran los tamaños creados y calculados: 1fr - 96.66px y 2fr - 193.32px.
Las etiquetas de línea de filas muestran solo los tamaños calculados: 80px y 80px, ya que no hay tamaños de fila definidos en la hoja de estilo.
Mostrar nombres de áreas
Para ver los nombres de las áreas, marca la casilla de verificación que aparece junto a Mostrar nombres de áreas. En este ejemplo, hay tres áreas en la cuadrícula: top, bottom1 y bottom2.
Extender las líneas de la cuadrícula
Habilita la casilla de verificación Extender líneas de cuadrícula para extender las líneas de cuadrícula hasta el borde del viewport a lo largo de cada eje.
Superposiciones de la cuadrícula
La sección Superposiciones de la cuadrícula contiene una lista de cuadrículas presentes en la página, cada una con una casilla de verificación, junto con varias opciones.
Habilitar vistas superpuestas de varias cuadrículas
Puedes habilitar las vistas superpuestas de varias cuadrículas. En este ejemplo, hay dos superposiciones de cuadrícula habilitadas: main y div.snack-box, cada una representada con colores diferentes.
Cómo personalizar el color de superposición de la cuadrícula
Puedes personalizar cada color de superposición de la cuadrícula haciendo clic en el selector de color.
Destacar la cuadrícula
Haz clic en el ícono de destacar para destacar inmediatamente el elemento HTML, desplázate hasta él en la página y selecciónalo en el panel Elementos.
