Creando Layouts con Css Grid Layout

Imagina que un amigo se te acerca y te dice:

Necesito crear un layout con un encabezado, un menú lateral, el contenido principal y un pie de página.

Si estás acostumbrado a crear páginas HTML5 con CSS3 debes haber imaginado toda la estructura, algo como:

<header>Encabezado</header>
<aside>Menu lateral</aside>
<main>Contenido principal</main>
<footer>Pie de pagina</footer>

Hasta aquí todo bien, ¿verdad? Bien. Ensamblar la estructura de las tags es la parte más fácil... Sin embargo, ahora necesitamos posicionarlas de la siguiente manera:

• Header: Parte de encima de la pagina

• Aside: En la parte izquierda de la página

• Main: En la parte derecha de la página

• Footer: Parte de abajo de la pagina

Para ti que ya estás pensando en los códigos y estás ansioso por comenzar a escribir tu .css, creo que debes estar imaginando varias formas de llegar al diseño que necesita nuestro amigo:

Puedo usar flexbox, tal vez use float, si me vuelvo loco uso position, etc ...

Sí, normalmente haría este diseño con float o flexbox, midiendo el tamaño de cada elemento, agregando un poco de margin y padding... Pero, para esta publicación, usaremos la nueva feature del CSS llamada " CSS Grid Layout ".

Conociendo el CSS Grid Layout

Cómo crear layouts era una tarea común en la vida cotidiana y, a veces, un poco aburrido de implementar, la multitud pensó: “¿No sería posible mejorar este proceso, haciéndolo más rápido y eficiente?”, Fue en este contexto que se creó la nueva funcionalidad denominada CSS Grid Layout.

Comenzando con nuestro código

Sin más vueltas, comencemos a codificar y ponerlo todo en práctica. La primera parte será definir el HTML de la página:

<header class="o-header">Header</header>
<aside class="o-aside">Aside</aside>
<main class="o-footer">Main</main>
<footer class="o-footer">Footer</footer>

Con eso, tendremos el siguiente resultado:

Como vemos, todo está sin posicionamientos ni espacios.

Nuestro primer paso será definir qué tag recibirá los "huecos" para luego agregar nuestros elementos. Bueno, si todo está dentro body, tenemos un buen candidato:

body { 
    display: grid;
}

Mira que el display ganó un nuevo valor llamado grid. Con eso estamos diciendo: "Mira, navegador, la tag body recibirá un grid, por lo que puedo informar dónde estará cada tag". Pero, después de todo, ¿de dónde decimos e informamos el posicionamiento de cada tag?

Posicionando nuestras tags

Para posicionar nuestras tags, debemos prácticamente "dibujar" en el CSS, donde estarán:

body { 
    display: grid; 
    grid-template-areas:  
        "header header header"  
        "aside main main"  
        "footer footer footer";
 }

Podemos ver el resultado:

Espera, Matheus, ¿qué es esta locura? ¿Qué es "header header header"?

Tranquilo, vayamos por partes, explicaré las líneas que se agregaron.

Entendiendo el Template Areas

Con la propiedad css-template-areas "dibujamos" nuestro layout, por lo que podemos informar cómo y por qué elementos estará compuesto:

• "header header header": Aquí estamos diciendo que la primera línea estará compuesta por un header.

• "aside main main": Aquí estamos diciendo que la segunda línea estará compuesta por un aside a la izquierda y por un main a la izquierda.

• "footer footer footer": Aquí estamos diciendo que la tercera y última línea se compondrá de un footer.

Así que nos las arreglamos para llegar al layout que nuestro amigo necesitaba.

Pero, ¿por qué declaraste el header y el footer tres veces?

El header y footer se declararon tres veces, porque estamos trabajando con un layout de tres columnas, esto se debe al hecho de que la segunda línea de nuestro template.

¿Y por qué tres columnas?

Sí, nuestra segunda línea podría tener dos columnas "aside main " así, pero entonces, ¿por qué repetimos el main dos veces ? Observa el layout que necesitamos obtener:

Mira que el main es un poco más grande que el aside. Más precisamente, el main es dos veces más grande que el aside, así que tuvimos que repetir lo mismo dos veces, por lo que le estamos diciendo al template: "Mira template, aquí en la segunda línea habrá un aside a la izquierda y un main a la derecha, sin embargo, el main debe ser el doble de grande que el aside".

Dando como resultado nuestro layout de tres columnas: "aside main main", por lo que para eso, en la primera y tercera línea también deberíamos tener tres columnas.

Genial, ahora entendí y aclaré mis dudas. Así que digamos a los elementos que deben permanecer en esos "huecos".

Diciendo a los elementos dónde quedarse

Para decirle a los elementos dónde deben estar, es decir, qué "laguna” es de cada uno, debemos ir uno por uno e informar:

.o-header {
    grid-area: header;
}

.o-aside {
    grid-area: aside;
}

.o-main {
    grid-area: main;
}

.o-footer {
    grid-area: footer;
}

Así, tendremos el siguiente resultado:

Ve que cada uno esté en su posición correcta, también tenga en cuenta que el nombre ingresado en la propiedad grid-area debe ser exactamente igual que los nombres dados en el grid-template-areas. Siguiendo nuestro layout, lo único que falta es establecer el color de los elementos, ¿verdad?

.o-header, .o-aside, .o-main, .o-footer {
background: #BC20E2;
color: #FDFDFD;
}

Y, de nuevo, nuestro resultado:

Pero espera... Nuestro layout tiene espacios y ocupan toda la página, hasta ahora está todo junto y ocupando solo el tamaño necesario.

Dando espacios entre los elementos

A continuación, informemos el espacio que debe haber entre los elementos:

body {
grid-gap: 1rem;
}

Con eso, los elementos ya deberían estar espaciados en 1rem que seria 16px:

¡Solo falta que ocupen toda la página!

Decir el tamaño de los elementos

Para decir el tamaño que cada row (línea) o column (columna) debe tener, también debemos decirle a nuestro template:

body {
grid-template-columns: auto auto auto;
grid-template-rows: auto 100vh auto;
}

Observa nuevamente que nuestras columns o rows se informan tres veces, esto se debe a que tenemos un layout de tres columnas y tres líneas, vea también que solo para la segunda línea declaramos el valor 100vh que corresponde a la altura total de _viewport_, las otras líneas serán automáticas.

Por estándar, el valor será auto, pero lo acabo de describir para que sepas que podría estar cambiando. Para saber qué valores se pueden configurar, consulte la documentación: grid-template-columns y grid-template-rows.

Con eso, deberíamos tener el siguiente resultado:

Muy relacionado con la necesidad de nuestro amigo.

Dando los toques finales

Para remediar la necesidad de nuestro amigo y entregarle el layout, solo haré algunas mejoras en el diseño:

Listo, ahora ya podemos entregar el proyecto. Si es necesario, el proyecto se puede descargar aqui.

Conozca también los cursos de Front End de Alura, así como el curso CSS Grid: Simplificando layouts, y vas a entender un poco más a fondo este mundo de Front End y CSS Grid. :)

Puedes leer también:

• Creación de componentes CSS con el estándar BEM
• Empezando a organizar tu CSS
• Centrar un elemento con CSS