Construyendo una estructura web con CSS-GRID

CSS Grid sin duda es unas de las herramientas más potente actualmente, esto de debe al gran potencial que nos proporciona con unas cuantas líneas de código, pero ¿por qué usar CSS Grid y no bootstrap, bulma u otras librerías?

La respuesta es simple, si queremos añadir una librería para crear la estructura de nuestro sitio web, no solo tenemos que cargar esta funcionalidad en nuestro proyecto, sino que tendremos que cargar todas las dependencias, funcionalidades, estilos entre otras características que muy probablemente no usaremos, lo que se resume en miles de líneas de código, cuando solo queremos estructurar nuestra página web, en otras palabras, estamos llenando nuestro proyecto de líneas de código innecesarias cuando podemos hacer con lo mismo con menos y de forma nativa.

Nota

Con esto no quiero decir que no usemos bootstrap , bulma o cualquier otra librería que nos ayude a maquetar nuestra página web, incluso es positivo que aprendemos a usarlas, lo que quiero decir es que no tenemos que usar estas librerías pesadas para pequeños proyectos.

Es importante que como personas, podamos entender y analizar cada proyecto, si entendemos bien nuestro proyecto, sabremos las mejores soluciones para optimizar y ayudar en la fluidez de nuestras páginas

Empecemos con el código

Lo primero que tenemos que hacer es crear el esqueleto de nuestro proyecto, en este caso usaremos las etiquetas de HTML5: header, aside, section, footer.

<main>
 	<header>Header</header>
    <aside>Sidebar</aside>
    <section>Content</section>
    <footer>Footer</footer>
</main>

Ahora sigamos con el CSS, lo primero que tenemos que indicar es que nuestra etiqueta main tendrá un display: grid;, de esta forma, podemos empezar a trabajar.

main {
    background-color: #333d57;
    display: grid;
    height: 100vh;
    grid-gap: 5px;
}

Le indicamos que ocupe el 100 de nuestro viewport height, en otras palabras: la altura será de todo lo que puedes aprovechar de mi pantalla height: 100vh; y le damos un espaciado de 5px con grid-gap: 5px;.

Columnas

Una vez en este punto tendremos que indicar cuantas columnas queremos que tenga nuestra estructura en mi caso quiero dos partes, la parte izquierda y la parte derecha, pero ¿Cómo hacemos esto?

CSS Grid tiene una propiedad llamada grid-template-columns en la cual cada fila que pongamos dentro de esta propiedad es una columna, no solo eso, podremos asignarle el nombre que queramos, en mi caso left-column y right-column

grid-template-columns:
    [left-column] 1fr
    [right-column]  2fr;

Además de indicar las columnas, también podemos indicar cuánto espacio queremos que ocupe esta columna 1fr, 100px, 100vh etc.

Filas

Perfecto tenemos la columna pero ¿podemos indicar las filas?, por supuesto que podemos.

grid-template-rows:
    [header-rows] 1fr
    [contenido-rows] 2fr
    [footer-rows] 1fr;

grid-template-rows actúa igual que grid-template-columns, en este caso queremos tres filas (header-rows, contenido-rows y footer-rows) con su respectivos tamaños.

Solo nos quedarían dos pasos:

Indicar donde empieza el header y el footer para que ocupen toda la pantalla.
Alinear nuestros elementos con flex.

Empecemos alineando nuestros elementos, algo sencillo con flex, indicamos que todos los elementos dentro de main sean display: flex; y tanto el contenido como los items se centren.

main > * {
    background-color: #47CF8E;
    display: flex;
    justify-content: center;
    align-items: center;
}

Tip

El signo de * significa cualquier cosa o elemento. Es un selector global

Finalmente, vamos a indicar que queremos que nuestro header y footer ocupen todo lo ancho de la pantalla.

header, footer {
    grid-column: left-column /  -1;
}

grid-column vendría siendo la abreviación de grid-column-start y grid-column-end. Lo que le estamos indicando es que empiece en nuestra columna left-column (hay que recordar que al principio declaramos dos columnas) y termine en -1 que quiere decir al final de todo.

Nota

En vez de -1 podríamos usar span 2 pero yo no lo recomiendo porque tendríamos que calcular cuantas columnas tenemos y donde queremos que acabe, sin embargo con -1 da igual cuantas columnas tenemos.

Si deseas poner la parte de responsive para móvil:

@media (max-width: 500px){
    main{
        grid-template-columns:
           [content-site] 1fr;
           
       grid-template-rows:
           [header-rows] 1fr
           [sidebar-rows] 1fr
           [contenido-rows] 1fr
           [footer-rows] 1fr;
    }
   
    header ,footer {
        grid-column: 1 /  -1;
        /* grid-column: left-colunm /  span 2; */
    }
}

Esto seria todo por mi parte, coméntame cualquier duda que tengas ya sea en mis redes sociales o en la parte de comentarios, con gusto te ayudaré.