CSS Grid Layout: The future is coming
Pasamos nuestros días adoptando nuevas formas de desarrollar, muchas veces creando y modificando lo que hemos aprendido para simplificar nuestras vidas. No es de extrañar que una vez más tengamos que adentrarnos a un nuevo mundo, o quizás no tan nuevo pero diferente, porque hemos vivido una evolución en lo que respecta a CSS Grid Layout.
Muchos que se adentran en el mundo de CSS acostumbran utilizar frameworks, o si eres de la vieja escuela utilizaste tablas, floats o más. Actualmente podrías estar utilizando Flexbox, pero es importante recordar que este fue creado para diseñar espacios eficientes de distribución de los elementos a través del movimiento direccional dentro de nuestra página y no para ser utilizado como un grid.
Muchos han renegado de insertarse en la evolución que es CSS Grid Layout, ya que no contaba con un completo soporte para nuestros navegadores. Pero desde finales de marzo del 2017, se cuenta con un completo soporte para Firefox, Chrome, Safari (iOs también) y Opera. No tardará tanto hasta que todos los navegadores sean compatibles.
Introducción al mundo de CSS Grid Layout
Veremos una introducción a CSS Grid Layout, para que te entusiasmes con esta nueva evolución y quieras investigar más.
Para mostrarte que ocurre cuando vamos aplicando las propiedades, veremos un juego muy didáctico. Iremos paso a paso, viendo qué sucede al aplicar las propiedades, y al final de este post, podrás encontrar el enlace para que tú también puedas practicar.
CSS Grid, funciona muy parecido a Flexbox, encontraremos que tiene la misma relación padre e hijo, es decir, contenedor y elementos contenidos.
Tal cómo en Flexbox, lo primero que tenemos que definir es nuestra propiedad display:grid, a quién le damos esta propiedad te estarás preguntando, bueno la respuesta es a nuesto elemento contenedor, en éste caso a nuestro grid-container que previamente lo definimos dentro de nuestro <div> como una clase.
Cómo pudes apreciar nada ocurre visualmente al definir la propiedad display:grid al contenedor, pero por detrás hemos realizado un gran cambio, ya que, al definir grid hemos hecho que todos los hijos del contenedor se ajusten a su padre y se conviertan el los items de éste.
Ahora vamos a definir las columnas, pondremos 3 columnas con grid-template-columns.
Tal cómo me pasó a mi al estar estudiando esto, mi primera pregunta fue qué son los fr, (¿¿¿¿????), pues bien averiguando a cerca de ellos me encontré con una gran explicación, las unidades fr son nada más que medidas en las que defino mi columna, se recuerda que dije arriba de ésta imagen que definiría 3 tres columnas, pues bien fr le dan dimensiones a ésta, ahora no las podemos ver, pero en la siguiente imagen sí, sólo nos falta poder separarlas para poder apreciarlas, ésto lo haremos con la propiedad grid-gap, quién le da los espacios en píxeles para poder hacer las separaciones proporcionales.
Ahora todo se ve mejor, puedes apreciar las 3 clomunas con una dimensión de 1fr, y además puedes ver su separación usando grid-gap:10px; , si vienes de la misma familia que yo, serás de esas personas que no creen nada hasta que lo comprueban una y mil veces, yo creo que aún tienes la duda de la funcionalidad de fr, te parece que cambiemos la dimensión de fr a la columna 2 y lo aumentemos en uno más, veamos cómo queda para que te termines de convencer de lo que realmente hace.
Ahora si estas convencido de lo que ocurre?, Yo sí, espero que tú también.
Te diste cuenta de la poca cantidad de código que hemos escrito, CSS Grid nos ahorra mucho código que antes hacíamos para separar bloques y dimensionarlos. Sigamos aprendiendo
Ahora vamos a empezar a crear nuestro layout de forma más real, hasta ahora sólo tenemos bloques, pero qué pasa si quiero modificarlo, bien vamos a hacerlo, necesito que prestes atención a los pasos porque modificaremos y explicaremos un par de cosas importantes.
Vamos a simular nuestra barra de navegación, todos sabemos cómo es una barra de navegación más conocido como nav, entonces lo que queremos hacer es dejar un bloque ocupando todo el espacio de arriba o lo que está en la primera posición. Para esto vamos a ocupar la propiedad grid-column, primero lo vamos a ver en una imagen y luego te explicaré su funcionamiento.
Te preguntarás que acaba de suceder aquí, yo también me pregunté lo mismo, bueno lo que acabamos de hacer fue definir la columna ocupando todos los espacio que le solicitamos, esto en la práctica es llamar al id de tu <div > y darle la propiedad grid-column, ahora veamos lo que hace 1/4, toma el primer número que ingresamos como la posición que elegimos y el número final dice dónde quiero que termine, es este caso, le dijimos toma la posición número 1 y ocupa los 4 lugares que definimos anteriormente, te recomiendo unalectura para entender más a cerca de la definición de posiciones y cómo las utilizamos aquí Grid Lines.
Ahora sigamos dando forma a nuestro layout, definamos un sidebar al lado izquierdo de nuestra estructura. Para eso utilizaremos un height y la propiedad grid-row, que como asociarás usa la misma lógica de grid-column, veamos cómo se ve aplicando la propiedad.
De la misma forma que ocupamos grid-column, ocupamos grid-row, vuelvo a recomendar que leas el link que te dejé cuándo hablabamos de grid-column, pues bien ahora ya va tomando forma nuestra estructura, recuerda que esto se lo aplicas a tu <div> con el id que hayas puesto.
Vamos a crear nuestro estructura de contenido para ello vamos a aplicar la propiedads que ya hemos visto y además agregaremos un nuevo valor para ella, pero primero veamos cómo se ve y luego explicamos que hemos realizado.
Veamos lo que pasó , nos posicionamos en nuestro row 2 y lo que hicimos fue agregar span para que abarcara todo el espacio entre los dos bloques y así si vemos la imagen anterior ésta se diferencia porque ahora span está cubriendo toda la parte dónde antes existian 2 bloques, recuerda que vas a poder practicar para ver como va cambiando esto a medida que ponemos otros valores, asi que no te desesperes si aún no lo entiendes del todo.
Ahora que ya tenemos bastante avanzado nuestra estructura, voy a borrar dos bloques, los que están al final porque no los necesitamos, para esto no necesitas una propiedad, sólo los sacas de tu HTML. Entonces nuestra estructura quedaría así:
Qué te parece si ahora hacemos el footer, pues bien para eso utilizaremos nuestro grid-column, te imaginas a quién le daremos esta propiedad para que ocupe todo el espacio en la parte inferior, trata de imaginarlo, te dejaré la imagen para que veamos como queda.
Bueno, ya te imaginas que número va despues de nuestro separador, espero que lo sepas, pero si aún no lo tienes, te contaré que debemos poner el número 4, recuerda que queremos que ocupe todo el espacio de abajo, para ello hacemos que ocupe desde la posición número 1 hasta la 4, veamos como se ve:
Esto ya se ve mucho mejor, ahora te parece que acomodemos nuestro último bloque, aún no se ve muy bien, bueno hemos aprendido cómo hacer que ocupe todo el espacio así que te imaginarás lo que usaremos, pero no nos quedemos solamente con lo que hemos visto hasta aquí, agreguemos una nueva propiedad para que veas que CSS Grid tiene infinitas posibilidades.
Recuerdas esa propiedad align-self, claro que la recuerdas la viste cuándo estudiabas Flexbox, lo que hace es tomar un item, el que tú escojas, y le da el valor, en este caso le pasamos end, que es ponerse al final del espacio, recuerda que también tenemos varios valores más para esta propiedad como: center, strech, auto, initial, te recomiendo que búsques todos los valores de ésta propiedad y otras propiedades que están disponibles para darle todos los movimientos a tu layout.
Conclusión
Pudimos ver cómo es trabajar con CSS Grid Layout, claro queda mucho más por estudiar y seguir probando, pero es fascinante poder incursionar en esta evolución para nuestros layout, y así tener una forma más independiente de poder manipularlos y trabajarlos, espero te haya parecido interesante esta lectura, y te motives a seguir buscando y estudiando, te dejaré links de interés a parte del juego para practicar que te prometí al principio.
Te dejo los links de referencia para que los estudies y practiques:
