Como usar CSS grids para crear el layout de una página web
CSS grids es un sistema nativo de maquetación CSS y llego para reemplazar los sistemas de grids que se desarrollador de manera artesanal (usando floats inicialmente y ahora con flexbox) para crear los layouts de las páginas y aplicaciones web.
Lo que te permite CSS grids es organizar los elementos del layout de una página de manera más lógica, con menos código y más flexibilidad.
Desarrollando un layout con CSS grids
Vamos a trabajar con un layout común que tiene lo básico:
- Header
- Sidebar
- Contenido (main)
El código HTML
El primer paso es crear el HTML. Es solo un padre con tres hijos. Nada fuera de lo común.
El padre .page es el encargado de definir el grid.
Agregando las bases de CSS
Este layout que estamos creando tiene 100% de alto y de ancho, para lograr esto tenemos que definir los CSS del html y del body. También para propósitos del demo vamos a agregar un borde al header, aside y main.
Creando el grid container
Para definir el grid, al padre .page le ponemos display: grid. Eso va a crear un "grid container" y va a hacer que todos los hijos directos se conviertan en "grid items".
Así se va viendo nuestra página
Parece una línea y ya, pero realmente son los hijos de .page apilados. El resultado son el header, aside y main apilados uno arriba del otro ¿Por qué?, bueno porque ni él .page ni sus hijos tienen height o contenido que los haga ocupar espacio.
Agregamos height del 100% al .page y con esto vemos los hijos. Por defecto el grid crea los espacios con el mismo height y el mismo width, porque eso se lo tenemos que definir con filas y columnas.
Definiendo las secciones del grid
Primero vamos a definir columnas con la propiedad grid-template-columns: 250px 1fr.
Los valores de esta propiedad separados por espacio representan el ancho de cada columns en el grid, dos valores hacen dos columnas, tres valores, tres columnas y así.
La primera columna es 250px y la segunda 1fr.
fr es una unidad de CSS que significa "fracción" que representa una fracción del espacio disponible.
Por ejemplo si el .page mide 1000px como la primera columna mide 250px la segunda (1fr) va a ser 750px.
El resultado, todavía no es el esperado. ¿Por qué?
El grid tiene definida 2 columnas, pero tiene 3 hijos. Por lo que los dos primeros hijos (header y aside) toman las 2 primeras columnas de la primera fila, pero el tercer hijo "se va" a la segunda fila.
Para arreglar esto tenemos que hacer que el header ocupe las dos columnas de la primera fila
Lo hacemos con la propiedad "grid-column" el valor representa los tracks que queremos que ocupe separados por "slash", en este caso el header va del 1 al 3.
Configurando filas
Ahora necesitamos que él <header> mida 100px de alto, para esto tenemos que definir filas.
La propiedad grid-template-rows nos permite definir el alto de las filas y funciona igual que las columnas, lo ponemos en 100px 1fr.
Últimos detalles
En el diseño tenemos "márgenes" entre los elementos, para hacer esto usamos otra propiedad de grid que se llama "gap" que nos permite poner un espacio entre cada elemento del grid.
Conclusion
CSS grids es la solución nativa para definir el layout de tu página. Solo tienes que definir el grid container con display: grid y definir columns y rows con las propiedades grid-template-columns y grid-template-rows respectivamente.