CSS Grid Layout: Mejores diseños con menos código

by Cesar F. Miranda Salcedo | Feb 23, 2021 | CSS, diseño web

En esta guía te voy a enseñar sobre CSS grid Layout y de que manera lo puedes usar en tus diseños, la verdad es que no es complicado, solo es cuestion de acostumbrarse a la sintaxis.

La primera vez que empece adentrarme en el tema, me costó mucho trabajo, ya que estaba acostumbrado a trabajar con floats y flexbox, y CSS Grid Layout es un concepto completamente nuevo que, como te digo la primera vez puede ser intimidante, pero no te preocupes aquí te voy a explicar todo lo que tienes que saber para qué empieces a usar CSS Grid en tus proyectos.

¿En qué consiste CSS Grid Layout?

CSS Grid Layout es un módulo completamente nuevo que trae un sistema de cuadrícula bidimensional a CSS por primera vez.

CSS Grid no es actualmente un estándar oficial, es un Candidate Recommendation por parte del W3C, aunque es una recomendación, los navegadores principales lo han adoptado.

Reemplaza el uso de floats, lo que genera menos y más legible código de css. Esto nos permite crear diseños mas complejos sin tantas complicaciones.

Si estas acostumbrado al sistema de grid de bootstrap… olvídate de él, con CSS Grid no estás limitado a 12 columnas, puedes usar cualquier cantidad de filas y columnas.

¿Qué es un grid o rejilla?

Un grid o rejilla, es una conjunto de cuadrados de medidas regulares, que están formados por una serie de líneas paralelas y perpendiculares a estas que se intersecan. Forman un grupo definido como columnas y filas.

El elemento padre se llama grid container (Elemento padre contenedor). Todos los elementos que son hijos directos del elemento padre se llaman grid items.

Contamos además con ejes; El eje de las filas y el eje de las columnas, el eje de las columnas corresponde con el «Eje Y» y el eje de las filas con el «Eje X», Como se muestra en la siguiente imagen.

Y hay más… Las líneas verticales y líneas horizontales que dividen la rejilla y separan las filas y las columnas, se llaman grid lines y se numeran automáticamente para las columnas así como para las filas, empezando por el uno, hasta el número de filas más uno, lo mismo para las columnas.

Ahora, El espacio que hay entre las filas y las columnas se llama gutter, el gutter para las filas puede ser diferente al de las columnas.

El objetivo final es hacer la rejilla que aparece en la imagen, Para empezar vamos a crear el contenedor con sus elementos hijo.

<div class="wrapper">
  <div class="one">Uno</div>
  <div class="two">Dos</div>
  <div class="three">Tres</div>
  <div class="four">Cuatro</div>
  <div class="five">Cinco</div>
  <div class="six">Seis</div>
</div>

.wrapper {
  display: grid;
}

Filas y columnas del Grid

Lo que hicimos hasta el momento fue crear el contenedor con la propiedad display: grid. Ahora definimos las columnas y filas con la propiedad grid-template-rows y grid-template-columns.

Estas propiedades definen las pistas o tracks, qué es el espacio entre dos líneas de la rejilla «horizontal y/o vertical». Si es vertical se llama columna o column y si es horizontal se llama row o fila.

Para nuestro cometido necesitamos definir dos filas y cuatro columnas. Vamos a necesitar dos filas de 150px y cuatro columnas de 150px, quedaría de la siguiente forma.

Nota: Las propiedades aceptan todas las unidades conocidas: em, rem, porcentajes, pixeles, vh, vw, etc.

.wrapper {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 150px 150px;
}

Para separar las ítems uno del otro, lo podemos hacer cambiando el tamaño del gutter con la propiedad grid-row-gap para las filas y grid-column-gap para las columnas. Si quieres que el gap sea el mismo para filas y columnas, lo puedes hacer con la propiedad grid-gap.

.wrapper {
  display: grid;
  /* El mismo tamaño para filas y columnas */
  grid-gap: 25px;

  /* Diferente tamaño para filas y columnas */
  grid-row-gap: 25px;
  grid-column-gap: 50px;
}

Tamaños fijos y flexibles: la unidad fr

Hasta ahorita hemos definido las filas y columnas de forma manual, que siendo honestos no es muy práctico a la hora de trabajar en proyectos complejos (grid de 12 columnas).

CSS Grid trae consigo una función que nos va a facilitar la vida al momento de crear filas y columnas, la función se llama repeat(), esta función recibe dos argumentos: el primero es la cantidad de elementos que quieres crear y el segundo recibe el tamaño de dichos elementos.

.wrapper {
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(2, 150px);
}

Al igual que la forma manual, estamos creando cuatro columnas de 150px y 2 filas de 150px, tenemos el mismo resultado con menos código ¡Genial!

Si quieres crear una nueva columna o fila con un tamaño diferente, lo haces de la siguiente forma:

.wrapper {
  grid-template-columns: repeat(3, 150px) 250px;
  grid-template-rows: repeat(2, 150px);
}

Como se muestra en la imagen las tres columnas definidas por la función tienen en el mismo tamaño, la cuerta es un poco más grande.

Ok, definir los tamaños de los elementos esta bien, digo, por lo general se define el ancho de un contenedor, pero hay ocasiones en las que se espera que el contenido tome la mayor cantidad de espacio que hay disponible. Esto es un poco similar a Flexbox donde la propiedad flex si la ponemos en uno se expandirá y ocupara todo el espacio posible.

CSS grid cuenta con una unidad de medida que tiene el mismo tipo de funcionamiento, se llama fractional unit o fr, esta unidad permite que un elemento se expanda y tome todo el espacio restante que tenga disponible.

El elemento va a tomar “una fracción” del espacio disponible, así si definimos el tamaño como 2fr; Va a tomar dos veces el tamaño de una fracción.

Usando 1fr en la columna final queda de la siguiente forma:

.wrapper {
  grid-template-columns: repeat(3, 150px) 1fr;
  grid-template-rows: repeat(2, 150px);
}

Debido a que nuestra rejilla tiene un tamaño de 1000px la última columna toma el espacio restante.

Ok, ¿Qué podemos hacer para que las columnas tengan el mismo tamaño? Bueno, en ese caso tendríamos que definir el tamaño en 1fr.

.wrapper {
  grid-template-columns: repeat(4, 1fr);
}

Posicionando elementos en la cuadrícula

Todos los elementos de la cuadrícula se distribuyen según el orden de origen, esto es de izquierda a derecha, podemos cambiar dicho orden y hacerlo a nuestro antojo.

Para hacer el movimiento nos tenemos que basar en las grid lines y elegir a que puntos queremos mover el elemento, por ejemplo:

Si queremos cambiar de posición el primer elemento y lo colocamos en lugar del elemento seis, haríamos lo siguiente en el elemento que queremos mover:

.one {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

Con esto le estamos diciendo que para la fila, tiene que empezar en la línea 2 y terminar en la línea 3; y para las columnas empieza en la 2 y termina en la tres, queda de la siguiente forma.

Existe una forma corta para definir la ubicación: grid-row y grid-column.

.one {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

Con menos código tenemos el mismo resultado, el primer parámetro es donde empieza, se separan con un “/” y el segundo parámetro donde termina.

Extender Grid Items

Para abarcar elementos de la cuadrícula en varias celdas o grid cells, existen varias maneras de realizar esa tarea, por ejemplo, digamos que queremos expandir dos lugares el ítem con número dos, para eso tenemos que hacer lo siguiente:

.two {
  grid-column: 2 / 4;
}

Con esto le estamos diciendo que el elemento empieza en el grid line número dos y que se expanda hasta el grid line número cuatro, este es el resultado en imagen.

Debido a que el elemento abarca dos grid cells, entonces se hace espacio al final del grid para agregar el elemento que hace falta, el número ocho.

Otra forma de expandir determinadas posiciones es usando el keyword, span:

.two {
  grid-column: 2 / span 2;
}

Con la palabra span, le estamos indicando las posiciones que queremos que abarque, en este caso dos y tenemos el mismo resultado que con la instrucción anterior.

Hay ocasiones en las que no sabemos el espacio que puede abarcar el contenido de las ítems, y queremos que abarque todo el espacio disponible, en ese caso en lugar de especificar cuanto espacios abarcara, usamos -1 para indicarle que tome todo el espacio disponible.

.eight {
  grid-column: 1 / -1;
}

Nombres en grid lines y grid áreas

Usar números para definir los grid cells, es sencillo si tu diseño también lo es, en el mundo laboral te vas a encontrar con proyectos más complejos que otros, para esos casos lo mejor que podemos hacer es asignarles un nombre a las líneas, veamos como.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

Dentro de la función repeat(), definimos el nombre de las filas y columnas, en el caso de las filas, definimos el inicio que se llama row-start y el final se llama row-end.

La función repeat(), básicamente es un loop, y va a crear dos filas con nombres row-start y row-end. ¿Cómo podemos manipulas las columnas independientemente? Bueno, cuando los elementos se crean dentro de la función automáticamente les asigna un número. Por ejemplo, la primera fila se llama ahora: row-start 1 y row-end 1, la segunda queda: row-start 2 y row-end 2.

Bueno, ya tenemos definidos los nombres para las filas y las columnas, ahora vamos a usarlos. Si factorizamos un poco el código usando los nombres, el código queda así:

.eight {
  grid-column: col-start 1 / col-end 4;
}

Con esto tenemos el mismo resultado de la imagen anterior, solo que ahora es mucho más sencillo posicionar los elementos en la cuadrícula.

Grid áreas

Existe otra forma de posicionar elementos que consiste en nombrar las áreas. Para nombrar “áreas” usamos la propiedad grid-template-areas en el contenedor.

.wrapper {  
  grid-template-areas: 'box-1 box-2 box-3 box-4'
                       'box-5 box-6 box-7 box-8'
}

.one {
  grid-area: box-1;
}

.two {
  grid-area: box-2;
}

.three {
  grid-area: box-3;
}

.four {
  grid-area: box-4;
}

.five {
  grid-area: box-5;
}

.six {
  grid-area: box-6;
}

.seven {
  grid-area: box-7;
}

.eight {
  grid-area: box-8;
}

Básicamente, grid-template-areas crea una representación con texto de cómo nuestro diseño final se verá. En el elemento hijo mediante la propiedad grid-area le asignamos el nombre definido en grid-template-areas y automaticamente el elemento será asignada a dicha área.

Esta técnica es práctica con diseños sencillos que no impliquen mucha complejidad, si tu diseño es muy complejo (12 columnas, header elaborado, etc.), te sugiera que no uses esta técnica, ya que se vuelve poco práctica.

Implicit Grids vs. Explicit Grids

Son las áreas que definimos manualmente y las que se generan automáticamente, para colocar todos los elementos que son.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(2, [col-start] 1fr [col-end]);
}

En el código anterior estamos definiendo dos filas y dos columnas, nuestro diseño cuenta con 8 columnas, entonces al estar definiendo solo dos columnas y dos filas y el resto de los elementos se convierten en un grid implícito, ya que nosotros no lo definimos como tal, el mismo CSS Grid se encarga de posicionar los elementos restantes.

Usando min-content, max-content y la función minmax()

Max-content

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: max-content 1fr 1fr 1fr;
}

La especificación max-content se adapta al tamaño del contenido con mayor tamaño dentro del elemento, mientras 1fr hace que el elemento tome el espacio disponible, max-content toma el tamaño del elemento más grande, como se puede ver en la imagen siguiente.

Min-content

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: min-content 1fr 1fr 1fr;
}

La especificación min-content trabaja a la inversa, el elemento se adapta al tamaño del elemento con el contenido de menor tamaño.

Se puede dar el caso, por ejemplo al usar min-content, que el contenido del elemento se desborde, para esos casos hacemos uso de la función minmax().

Minmax()

Es una función que recibe dos parámetros, CSS se asegura que la fila o columna siempre se mantendrá entre estos dos valores. Por ejemplo, imagina que pasamos a la función minmax() 150 píxeles y 250 píxeles para una columna, CSS Grid Layout garantizará que, pase lo que pase, esta columna de la cuadrícula siempre permanecerá entre 150 y 250 píxeles de ancho.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: minmax(150px, 250px) repeat(3, 1fr);
}

Como se puede observar la primera columna gracias a la función minmax(), tendrá un tamaño entre 150 y 250px nomas, si cambiamos el tamaño del contenedor por un valor en porcentaje, digamos un 90% y cambias el tamaño del navegador, vas a notar que en cierto punto por más pequeña que sea la pantalla, el valor siempre se mantendrá en 150px, esto es de suma utilidad cuando queremos controlar el tamaño del contenido que tenemos, esta función también acepta los valores min-content y max-content.

Diseños responsivos: auto-fit y auto-fill

Gracias a CSS Grid, podemos tener diseños responsivos sin tener que escribir media queries, veamos como funciona auto-fit y auto-fill.

Auto-fill

Llena la fila con las columnas que puedan caber. Es decir que crea columnas siempre que quepa una nueva, ya que está tratando de llenar la fila con tantas columnas como sea posible.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fill, 100px);
}

Las columnas recién agregadas aunque están vacías, seguirán ocupando un espacio designado en la fila.

Auto-fit

Tiene el mismo que funcionamiento que auto-fill. La diferencia es que auto-fit colapsa los espacios vacíos, como se puede ver en la siguiente imagen.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fit, 100px);
}

Colocadas estas propiedades, a medida que va cambiando que vamos variando el tamaño de las pantallas, van a hacer que se distribuyan automáticamente.

Ahora, si nos apoyamos de la función minmax(), podemos hacer un diseño responsive, sin media queries, y con un código más ligero.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Nota: Firefox y Chrome viene dotados de un visor de grid, te será de mucha utilidad al momento de escribir los estilos CSS.

See the Pen
CSS Grid Layout Example by Plectro lab (@Plectro-lab)
on CodePen.

En resumen

CSS Grid Layout te abre un nuevo abanico de oportunidades a la hora crear diseños. Gracias a su fácil uso, ofrece un gran poder de diseños, además si lo combinas con flexbox te será mucho más sencillo crear los diseños que tengas en mente.

Esto también nos va a permitir ofrecer estilos más ligeras, que se traduce en tiempos de carga más rápido y usuarios contentos ?.

Es un poco confuso al comienzo debido a que es un cambio respecto a como veníamos manejando los diseños de las páginas web.

Definitivamente deberías de darle una oportunidad y empezar a jugar con él, actualmente es un Candidate Recommendation, aun así tiene un alto nivel de soporte por parte de los navegadores.

Si quieres investigar más al respecto, la documentación oficial te será de gran ayuda.