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 que aparecen en este artículo provienen de estas dos páginas web: Caja de frutas y Caja de bocadillos.
Descubre las cuadrículas de CSS
Cuando se aplica 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, dispuesta como una cuadrícula para mostrar la posición de sus líneas y seguimientos de cuadrícula:
Abre el panel Layout. Cuando se incluyen cuadrículas en una página, el panel de diseño incluye una sección Cuadrícula que contiene una serie de opciones para ver esas cuadrículas.
Alinear los elementos de la cuadrícula y su contenido con el Editor de cuadrícula
Puedes alinear los elementos de la cuadrícula y su contenido con un 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 Elementos > Estilos, haz clic en el botón
Editor de cuadrícula junto a display: grid.
En el Editor de cuadrícula, 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 Cuadrícula en el panel Diseño contiene 2 subsecciones:
- Configuración de la pantalla superpuesta
- Superposiciones de cuadrícula
Analicemos cada una de estas subsecciones en detalle.
Configuración de la pantalla superpuesta
La Configuración de visualización superpuesta consta de dos partes:
a. Un menú desplegable con las siguientes opciones:
- Ocultar etiquetas de línea: Oculta las etiquetas de línea para 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 (seleccionada de forma predeterminada).
- Show line names (Mostrar nombres de línea): Muestra los nombres de línea para cada superposición de cuadrícula en el caso de cuadrículas con nombres de línea.
b. Casillas de verificación con las siguientes opciones:
- Mostrar tamaños de las pistas: Activa o desactiva la opción para ocultar o mostrar los tamaños de las pistas.
- Mostrar nombres de área: Activa o desactiva la opción para ocultar o mostrar los nombres de áreas, en el caso de cuadrículas con áreas de cuadrícula con nombre.
- Extiende 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 se activa esta opción, las líneas de la cuadrícula se extienden hasta el borde del viewport a lo largo de cada eje.
Examinemos esta configuración con 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 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 las CSS grid-column: left / right.
Mostrar los nombres de las líneas facilita la visualización de la posición inicial y final del elemento.
Mostrar tamaños del recorrido
Habilita la casilla de verificación Mostrar tamaños del recorrido para ver los tamaños de los segmentos en la cuadrícula.
Las Herramientas para desarrolladores mostrarán [authored size] - [computed size] en cada etiqueta de línea: tamaño Autorizado: 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 columna snack-box se definen en el grid-template-columns:1fr 2fr; del CSS.
Por lo tanto, las etiquetas de línea de las columnas muestran los tamaños de creación y de procesamiento: 1fr - 96.66px y 2fr - 193.32px.
Las etiquetas de línea de fila solo muestran tamaños calculados: 80 px y 80 px, debido a que no hay tamaños de fila definidos en la hoja de estilo.
Mostrar los nombres de las áreas
Para ver los nombres de las áreas, habilita la casilla de verificación Mostrar nombres de área. 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 Extiende las líneas de cuadrícula para extender las líneas de cuadrícula al borde del viewport a lo largo de cada eje.
Superposiciones de cuadrícula
La sección GridOverlay contiene una lista de cuadrículas presentes en la página, cada una con una casilla de verificación junto con varias opciones.
Habilitar las 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 diferentes colores.
Personaliza el color de superposición de la cuadrícula
Puedes personalizar el color de cada superposición de la cuadrícula haciendo clic en el selector de color.
Destacar la cuadrícula
Haz clic en el ícono de resaltado para destacar inmediatamente el elemento HTML, desplázate hasta él en la página y selecciónalo en el panel Elementos.
