¿Qué es Grid?

Cuando hablamos de CSS Grid Layout estamos hablando del sistema que actualmente reina de todos los disponibles en CSS, el que es sin duda actualmente más poderoso.

Si en el artículo anterior de introducción a Flex Box, ya pudimos ver gran parte de la potencia que nos ofrece Flex Box, el sistema unidireccional más potente de la actualidad. En este artículo, os presentaremos a CSS Grid Layout (también conocido como CSS Grid) el sistema bidimensional que actualmente reina por encima de todos los disponibles en CSS (incluido Flex Box), el más poderoso.

Preparando nuestra parrilla de Grid

Vamos a ver un ejemplo de cómo preparar nuestra plantilla de Grid. Para ello, partiremos del siguiente HTML:

Y comenzamos con el CSS, en flex box ya vimos que trabajábamos sobre un elemento padre, en Grid Layout la manera de trabajar es “similar, pero con unos matices propios” trabajaremos en una especie de parrilla. Por lo que, el div que acabamos de crear (que será nuestro div que contenga la parrilla), le indicaremos que será de tipo grid con la propiedad de CSS display: grid.

Para realizar este tutorial trabajaremos con Mozilla Firefox como navegador ya que nos permite trabajar mejor que con Grid debido a que dispone de alguna herramienta que nos permite ver los márgenes, etc. y que no encontramos en todos los navegadores.

De hecho, si abrimos el documento HTML en Firefox, podemos ver que ya podemos ver nuestra parrilla (también conocida como grilla o cuadricula) que acabamos de definir.

Una vez tenemos la parrilla al ponernos encima vemos que solamente tenemos un cuadro, en Flex Box ya vimos que era el momento de crear a los hijos. Pero a diferencia de Flex Box, Grid está basado en cuadrículas, y vamos a crear el propio desde CSS.

Ejercicio vistas mobile, tablet y desktop

Vamos a ver hacer un ejercicio:

Tenemos que realizar la vista 3 ya que nos piden 3 vistas para 3 dispositivos. Os animo a una vez realicemos la vista de desktop y una vez realizada, realicéis las otras dos vosotros solos. ¿Os animáis? Solucionaremos las 3 pero así asimilareis mejor los conceptos.

Vista Desktop (min-width: 1024px)

Como Grid es un sistema basado en cuadrícula, tenemos que pensar en cuadros y mirando la siguiente imagen:

 

Podemos ver que tenemos 4 columnas y 5 filas. Por ello, vamos a nuestro CSS y escribimos lo siguiente:

Si vamos al navegador (¡Firefox recordad!), podemos ver los bordes de las columnas que hemos definido:

¿Cuántos cuadrados tenemos? Si tenemos 4 columnas y 5 filas si lo multiplicamos tenemos un total de 20 cuadros.

De hecho, si nos ponemos encima de los cuadros que nos aparecen en la ventana del inspector del navegador podemos ver que se nos selecciona también dentro de la web. Este tipo de herramientas son los que como ya dijimos no ofrecen todos los navegadores, por ello, Grid y Mozilla son mejores amigos.

Tenemos que hacer divs, pero no necesitamos 20, ya que algunos de los div utilizaran más de un cuadrado. Un ejemplo de ello es el div de menú que ocupará 3.

Vamos a realizar un total de 7 divs, para ello, usaremos un pluggin que viene preinstalado de VSC → llamado Emmet. Si escribimos esto y pulsamos control espacio y pulsamos sobre emmet:

Nos ha facilitado mucho el escribir el código, el resultante será:

Vamos a empezar con la fila 1, en la que tenemos dos columnas una que ocupará 1 cuadrado (el header) y otra que ocupará 3 cuadros (el menú).

Si ahora miramos el navegador, esto ya va cogiendo otro color, nunca mejor dicho:

El código resultante de la vista desktop será:

Y el resultado:

Si modificamos el HTML y le ponemos el nombre a cada uno de los contenedores:

Y volvemos a añadir la grilla para ver los recuadros, podemos ver lo que hemos hecho para esta resolución:

Hemos añadido una media query que controla si la resolución es mayor que 1024px en caso contrario, podemos ver que los estilos no se aplican:

Vista Tablet (min-width: 720px &max-width: 1023px)

Si miramos la vista tablet, podemos ver que tenemos 5 filas y 3 columnas, lo que hará un total de 15 cuadrados en nuestra parrilla. Pero seguimos necesitando solamente 7 divs.

El resultado será:

Vista Mobile (max-width: 719px)

Si miramos la vista mobile, podemos ver que tenemos 7 filas y 1 columnas, lo que hará un total de 7cuadrados en nuestra parrilla. Y nosotros tenemos 7 divs, así que perfecto.

En la vista mobile, tenemos que construir una estructura de 1 sola columna y 7 filas. Vamos a imaginar que todas son iguales, ya que esto nos permitirá ver como trabajar con una alternativa mucho más elegante a los % para añadir los valores a grid-template-columns, los fr.

Ya que los fr, nos permiten subdividir el ancho (hacen lo mismo que los %) de columnas o filas en tantos cuadraditos como fr le añadamos. Pero con la diferencia que en los % tenemos que calcular nosotros las dimensiones que ocupa cada uno de los cuadrados. Esto, puede provocar que en según que casos sea difícil trabajar con ellos, en cambio con fr, si solamente ponemos 1fr este ocupará todo el ancho de la pantalla, si queremos subidibidir el ancho entre 3 utilizamos fr fr fr (los tres cuadrados resultantes serán iguales). E incluso, si tenemos muchos fr podemos usar repeat(5, 1fr), que nos generará 5 cuadrados iguales.

Vamos a realizar la vista mobile con fr:

Vemos que el grid-template-columns, al solo haber un fr, este ocupa toda la anchura de la columna. Y en cambio, si utilizamos % tendríamos que hacer cálculos más engorrosos. Por ello, hemos utilizado fr.

También existen mecanismos para que no todos los fr tengan las mismas dimensiones, pero no los veremos en este artículo por el momento. 

El resultado final será:

En este ejemplo, además, hemos visto la potencia de combinar CSS Grid Layout con Flex Box. Con CSS Grid hemos realizado la estructura de las vistas. Y con Flex Box hemos centrar el texto de los divs.

Podéis ver el código de mi ejemplo al completo en: https://github.com/DavidBernalGonzalez/grid-responsive-template/settings

O bien, descargaremos el proyecto en: https://github.com/DavidBernalGonzalez/grid-responsive-template

Espero que os haya gustado, en próximas clases veremos más Grid. Saludos y hasta la próxima