Css Grid, la mejor opción para crear diseños web.
Css Grid es la mejor opción para estructurar, organizar y diseñar los elementos de nuestro sitio web, ofreciéndonos un sistema de disposición apropiado de forma nativa en el navegador y a nuestra total disposición.
Esto nos brinda gran cantidad de beneficios como por ejemplo tener un código mas fácil de comprender y mantener.
Otra de las principales razones por la cual utilizar Css-Grid es que supera a frameworks como Bootstrap o Foundation en lo que sistema de grillas se refiere, haciéndolo mas ligero, mas flexible y sin limitantes.
Pero antes de comenzar a comparar o criticar primero debemos saber, ¿Qué es Css Grid?.
En Css solemos utilizar múltiples propiedades para estructurar nuestros sitio web, utilizando tablets, inline-block, floats, relative o hasta el mismo flexbox que solo utiliza una dimensión.
El modulo Css-Grid entra en acción ofreciéndonos: un sistema de filas y columnas en dos dimensiones, y total libertad de los ítems para organizar nuestros contenido a gusto.
¿Y donde queda el responsive design? Tampoco es un problema con Css-Grid que no solo podemos definir filas y columnas sino también redefinirlas a nuestro gusto dentro de un media query y tendremos la vida resuelta.
Comencemos con lo básico
Echemos un vistazo rápido a la terminología de nuestro Grid y comencemos a trabajar con ella.
Grid Container: Es nuestro elemento “Padre”, donde se asigna un {display:grid;} y nos permitirá colocar otras propiedades para manipular nuestro diseño.
Grid Item: Son los hijos directos de nuestro container, estos los manejaremos a nuestra voluntad, nuestras filas y columnas que moveremos a nuestro gusto.
Grid Line: Son las lineas divisorias horizontales y verticales.
Grid Track: Es el Espacio entre dos líneas adyacentes. Filas y columnas.
Grid Cell: Nuestras celdas serán el espacio entre dos filas adyacentes y 2 columnas adyacentes.
Grid Area: Espacio rodeado por 4 grid lines
Ejemplo 1
Vamos a crear un pequeño proyecto en nuestro HTML, la idea es que tratemos de realizar el contenido de la imagen para entender un poco mejor como funciona Css-Grid.
Comencemos creando un section con la clase container (nuestro padre) donde guardaremos todo y tendrá 4 clases items (sus hijos) que son los que necesitamos (header, left, contenido y footer).
Esto es todo lo que necesitamos por ahora para tener nuestra estructura lista en HTML, ahora nos dirigimos a nuestros CSS y comenzamos la magia.
Lo primero que debemos hacer es asignarle a nuestro contenedor la propiedad de display: grid; para definirlo como un contenedor de grilla y que nuestro contenido tenga ese tipo de contexto.
Ahora, Para asignar el número de columnas y filas que tendrá nuestro grid así como su tamaño, existen las propiedades grid-template-columns y grid-template-rows.
O si quieres resumirlo aun mucho mas, utiliza la propiedad grid-template: filas / columnas; Donde los valores que definas en el lado izquierdo serán las filas y en el derecho las columnas por ejemplo, necesitamos definir 3 filas y 2 columnas.
Esta parte es importante, como no estamos manejando tamaños exactos vamos a decirle a nuestra primera columna que abarque 400px y el resto (la segunda columna) 1fr asi vamos a tener un área con un espacio fijo y dinámico, y con nuestras filas lo mismo 100px al inicio,1fr (una fracción el medio) y 100px al final.
Nota: La unidad fr representa una fracción del espacio disponible en el contenedor de la grilla, lo utilizamos para que nos abarque el espacio total.
Vamos a definir nuestras áreas con grid-template-areas y visualiza el ejemplo de nuestra imagen guía donde la parte de arriba es el header, en el medio el left y el contenido y abajo el footer, una vez lo hayas visualizado vamos a nuestro Css a realizarlo de una manera muy didáctica y sencilla.
¿Por que se repite header y footer? si te diste cuenta en nuestra imagen guía, necesitamos que header abarque el espacio total de dos columnas al igual que el footer, por eso lo hacemos de esta forma, y escribimos el código en Css de una manera donde sea ¡mucho mas fácil entenderlo! ¿Lo notaste?.
Ahora nos dirigimos a nuestro HTML para decirle a nuestros items que áreas deben ocupar en nuestro Grid.
Y le definimos una clase independiente a cada uno en nuestro Css y le decimos que área deberá ocupar utilizando grid-area. (propiedad aplicada para los grid-item (hijos)).
Ahora vamos a darle un poco de estética a nuestros items, dándoles un color y un espacio para que se parezca mas visualmente a nuestra imagen guía.
Y para finalizar este pequeño proyecto necesitamos agregar una propiedad común de Css-Grid llamada, grid-gap que especifica el espacio entre las filas y columnas de nuestra grilla, y le diremos también que nos abarque el tamaño total de la altura de la pantalla con un viewport de 100.
¡Y woala! en unos pocos pasos hemos creado el primer proyecto utilizando css-grid layout, y nuestro resultado final seria el siguiente.
Te gustaría saber como están estructuradas paginas web como Pinterest, Instagram, Freepik, ¿entre otras? Déjame un Clap y Comenta que pagina te gustaría construir utilizando solo Css-Grid, y la replicaremos en el siguiente post en su versión de escritorio y móvil y abarcando mas a fondo el sistema de Css-Grid.
Si te gustaría entrenar o aprender mas del tema te dejo un juego didáctico donde aprenderás a cultivar, regar y cortar tu jardín utilizando solo Css-Grid: https://cssgridgarden.com/#es.
CSS Grid Layout te va a cambiar la vida como desarrollador Frontend para bien y es compatible con todos los navegadores modernos para que empieces a usarlo hoy mismo
Temas que te pueden interesar:
¿Debe un diseñador saber programar?: https://medium.com/sue%C3%B1os-graficos/debe-un-dise%C3%B1ador-saber-programar-61c5df2f94f6
Consejos para mejorar el diseño y la experiencia de un sitio web: https://medium.com/sue%C3%B1os-graficos/consejos-para-mejorar-el-dise%C3%B1o-y-la-experiencia-de-tu-sitio-web-7cc32fb862b3
