Por qué CSS Grid liberará la creatividad del diseño web

Tradicionalmente la mayoría de estas restricciones provienen de no poder posicionar elementos como en los proyectos de impresos, ya que en el fondo un sitio web funciona como un documento de text, donde el contenido fluye hacia abajo -flow layout-.

Esto se debe a que cuando la web nació alrededor de 1990, su propósito era compartir investigación entre científicos. La estética no era parte de la ecuación, por lo que no se ideó ninguna manera de controlar la diagramación.

Conforme el uso de la web se extendió más allá del propósito original, surgió la necesidad de mejorar cómo se mostraba el contenido. Los primeros navegadores añadieron etiquetas que permitían cambiar el tamaño o tipo de letra y utilizar color (tanto en la tipografía como en el fondo).

En 1996, quienes construían sitios web se dieron cuenta que podían utilizar tablas para diagramar el contenido. Aunque no era el propósito de una tabla e implicaba una gran cantidad de código, funcionaba.

Fue la primera ocasión en que diseñadores web usaron su ingenio para apoderarse de una herramienta independientemente de su propósito original. Desde entonces ha pasado muchas veces.

Varios años más tarde apareció CSS, un lenguaje creado específicamente para manipular la forma del contenido; su llegada revolucionó y simplificó el trabajo.

Sin embargo, CSS seguía teniendo poco margen en cuanto a diagramación: podíamos manipular tamaño y posición, pero seguíamos en un contexto de bloques que fluyen en vertical, un poco como Tetris, pero sin la posibilidad de acomodar piezas de acuerdo a su forma.

No existía una manera nativa de crear columnas, por ejemplo. De nuevo, surgió el ingenio: tomar la propiedad float, creada para “flotar” un elemento de manera que el texto fluya a su alrededor como en un libro y utilizarla para asemejar columnas. Esta técnica se conoce como float layout y ha sido la manera de facto de diagramar sitios por casi veinte años.

El float layout tiene sus propias desventajas: contenedores que colapsan, columnas truncadas y la no alineación verticalmente. Para eso también inventamos trucos, como utilizar imágenes de fondo para que dos columnas parezcan del mismo tamaño. Aprendimos a vivir con los problemas que no podíamos solucionar.

Se han ideado remedios cada vez más complejos, por ejemplo, frameworks como Bootstrap, que permiten importar código donde ya se ha creado un sistema de retícula. Sin embargo, persisten en ellos las acotaciones propias del HTML y CSS además de que al estar atados a la retícula del framework, no podemos crear una propia.

La consecuencia es que el diseño web se ha vuelto uniforme, y limita la creatividad. Gracias a que Chrome, Firefox, Safari y Opera implementaron CSS Grid desde marzo de 2017, nace un nuevo escenario.

CSS Grid es un nuevo módulo dentro del lenguaje CSS. No es un “framework”, ni un “hack”, ni es JavaScript y no es una técnica que se apropia de herramientas hechas para otro fin. Es el primer módulo oficial de CSS creado específicamente para diagramar usando una retícula. Es un cambio tan grande como pasar de tablas a CSS o responsive.

Con CSS Grid definimos una retícula real: describimos el comportamiento de columnas y filas, podemos delimitar y nombrar áreas en base a ellas. Los elementos dentro de ese espacio se posicionan dentro de esa retícula, ya sea de forma automática o implícita, o especificando explícitamente dónde deben estar.

CSS Grid es un sistema bidimensional: por primera vez tenemos control tanto del espacio vertical como horizontal. De manera nativa varias columnas podrán tener la misma altura, a pesar de que una de ellas tenga menos contenido, o posicionaremos un elemento a dos tercios de la altura de un sitio, o sobrepondremos elementos sin utilizar position: absolute.

Para dar un ejemplo concreto: supongamos que queremos recrear un cuadro de Mondrian en una página web a base de código, y que además sea responsive, que se adapte a diferentes dispositivos. Hace 5 años esto sería casi imposible pero ahora con CSS Grid es factible, tal como lo muestra esta demo de Jen Simmons (integrante del CSS Working Group y Designer and Developer Advocate en Mozilla):

Este ejemplo ilustra las grandes posibilidades que CSS Grid abre, lo que implica un nuevo ajuste en la manera que creamos webs.

Y es que estamos frente a un cambio revolucionario que permitirá diseñar con menos y mejor código, escenarios completamente innovadores. Si aprovechamos la oportunidad, CSS Grid es una herramienta que liberará la creatividad en las experiencias web.