DÍA 13 / 2017

CSS Grid: La BBC como ejemplo

Ignacio Villanueva
Ignacio Villanueva
18.10.2017

CSS Grid Layout ha llegado para cambiarlo todo. Para ello veremos un ejemplo real con fallbacks para navegadores antiguos.

Un poco de historia

Resulta curioso como la inmensa mayoría de las personas que trabajamos en la web hemos tenido que maquetar alguna vez, pero hasta ahora, tras tantos años no ha habido ningún módulo de CSS especialmente dedicado a ordenar nuestras estructuras HTML para crear layouts complejos sin usar 'hacks'.

Llevamos tanto tiempo dedicándonos a usar 'trucos' en maquetación para crear layouts que me sorprende enormemente cuando alguien dice que el CSS es fácil. Fácil es aprenderse la sintaxis y el usar la cascada decentemente, pero te encuentras con que a algunas personas les resulta complicado. No porque el CSS en si lo sea, si no porque bajo mi punto de vista hay que tener visión espacial y saber pensar en como colocar "cajas" en una pantalla. Esto no quita que a cada uno se nos de mejor una cosa que otra o nos guste más maquetar o programar.

Si nos remontamos a la antigüedad del CSS todo comenzó allá por 1996 y tras pasar por el uso de tablas, floats y Flexbox ahora podemos decir que CSS se ha transformado en uno de los standards más amados en la web.

Hoy 18 de octubre podemos decir que los principales navegadores al fin, tienen soporte para la especificación oficial de CSS Grid, la cual veía la luz gracias a la gente de Mozilla (con la especificación moderna) con su navegador Firefox cuando el 7 de marzo de este mismo año lanzaban por primera vez la versión final tras muchas semanas bajo 'flag'.

Pero ojo, nos reímos porque el último siempre es nuestro amigo Internet Explorer, en su versión Microsoft Edge. Aún así, no nos podemos olvidar que fue Microsoft con Internet Explorer 10 allá por 2012 quien impulsó por primera vez este standard cuando ninguno del resto de los navegadores parecía creer.

Siete meses han pasado y Firefox, Chrome, Opera, Safari y Edge (los principales navegadores que usamos en occidente y parte del mundo) ya pueden usar CSS Grid Layout. ¡Vivimos un momento maravilloso en la web!

Flexbox vs CSS Grid

La diferencia es clara entre Flexbox y CSS Grid. El primero permite la alineación de elementos en una dirección (filas o columnas), horizontal o vertical y el segundo que usa tanto filas como columnas a la vez.

Os dejo un ejemplo sencillo en el que podéis ver la diferencia entre Flexbox (arriba) y CSS Grid (abajo) en el que ambos tienen cuatro hijos (elementos).

See the Pen oGaeXR by Ignacio Villanueva (@IgnaciodeNuevo) on CodePen.0

Propiedades

No creo que tenga sentido escribir otro artículo más sobre como funciona cada propiedad (puesto que se han escrito infinidad), por ello os dejaré una serie de recursos extra al pie de este artículo para que podáis aprender a usar cada una de ellas.

Cuando hablamos de un grid podemos pensar en una rejilla de elementos con espacios (gaps) entre ellos. Ejemplos clásicos son Bootstrap Grid o el archiconocido 960 grid system.

Aunque todos habremos usado alguna librería CSS para crear grids, siempre hemos tenido repercusiones al hacerlo.

  • El peso de la librería aumentaba considerablemente nuestras hojas de estilos.
  • Añadíamos multitud de clases CSS a nuestro HTML que lo ensuciaba en exceso.

Por no entrar en la especificación os invito a leer la documentación en castellano de CSS Grid de la MDN, ver una serie de videos en inglés llamada Grid by Example creada por Rachel Andrew o echar un vistazo la estupenda guía que han creado en CSS-Tricks llamada A Complete Guide to Grid.

CSS Grid es uno de los módulos de CSS más amplios que se han creado hasta la fecha y tiene muchas propiedades. La mayoría funcionan exactamente igual para la vertical como la horizontal.

Os dejo unos ejemplos de cada propiedad que he creado hará algún tiempo y una galería de elementos ficticia en la que podéis ver como está comentada la siguiente línea .wrapper { display: grid; }. Podéis encontrar el código de ejemplo aquí.

¿Sabemos y debemos usar ya CSS Grid?

Parece que cuando hablamos de una especificación tan moderna como esta tendemos a pensar dos cosas, la primera que todo el mundo ya sabe usarla pero en la realidad nos podemos llevar enormes sorpresas cuando vemos encuestas como la que realizaron en Smashing Magazine donde con 1.573 votos un increíble 61% comentó no haber usado aún CSS Grid.

Días después comentaba con unos conocidos que había tenido la oportunidad de usar Grid en un proyecto real y ellos decían que no lo usarían jamás debida a su baja adopción por parte de los navegadores así que quise preguntaros si pensáis que es correcto hacerlo (y no hablamos de un proyecto personal), si no en uno profesional.

Estos fueron los resultados.

Bajo mi opinión se puede usar, pero ojo, depende. Depende del proyecto y obviamente depende de si nuestra empresa puede y quiere permitirse el tiempo extra que nos llevará dar soporte a otros navegadores usando un grid basado en floats o dar soporte a navegadores antiguos. Esto no quita que se pueda usar perfectamente ya que según los navegadores modernos vayan teniendo más y más adopción, nuestros proyectos ya estarán preparados.

Inspector de CSS Grid

Antes de empezar con el ejemplo que os tengo preparado, me gustaría comentar que, al menos en este momento la mejor forma de inspeccionar CSS Grid en el navegador es con el inspector que incorpora Firefox Developer Edition.

Como podéis ver en el video si inspeccionamos el elemento padre y clicamos en el icono que aparece a la izquierda de la propiedad display: grid; se nos mostrarán unas líneas que representan los grid-items y los grid-gaps entre elementos.

Podemos ir al panel "Disposición" ("Layout" en inglés) para mostrar u ocultar opciones; o cambiar el color de dichas lineas para que se vean mejor si el fondo sobre el que están nos dificulta verlas.

Así mismo podemos pasar el puntero del ratón por el grid que se ha creado debajo y ver en que posición se encuentra cada elemento, que grid-area tiene asignada y las dimensiones del elemento.

See the Pen CSS Grid Layout with @support flexbox fallback by Gustaf Holm (@primalivet) on CodePen.0

Manos a la obra

Después de haber hablado sobre la historia, la diferencia frente a Flexbox, sobre si debemos o no usarlo en producción y el inspector de Grid de Firefox es momento de empezar a trabajar.

Tened en cuenta que no se han usado ni prefijos que podríamos escribir manualmente o con Autoprefixer, así como el uso de unidades relativas como EM o REM.

Podéis ver el ejemplo aquí.

Conclusiones

Espero que os sea de utilidad y entendais un poco más como podemos usar CSS Grid, Flexbox, @supports y como aplicar progressive enhancement para dar soporte a distintos navegadores.

Documentación extra