CSS Grid: el futuro del diseño web ya está aquí

El año pasado tuve la posibilidad de asistir como oyente a la SmashingConf en Barcelona, una conferencia centrada en el diseño web. Tal y como ya comenté en su día, la puesta en escena y la calidad de las charlas me dejaron boquiabierto. La charla que más me impresionó sin duda fue la de Jen Simons, quien habló de todo lo que está (o debería decir «estaba») por llegar al mundo web.

Jen presentó un montón de funcionalidades increíbles como el recortado de imágenes, las letras capitulares, las cover sheets, la maquetación por columnas… Todas estas demos (y algunas más) las tienes recopiladas en su lista de demos del 2016; te recomiendo que las mires todas prestando especial atención a la sencillez del código fuente y la elegancia de las reglas CSS.

La funcionalidad que robó mi corazón, y de la que te voy a hablar hoy, son las CSS Grid. Recuerdo que cuando asistí a la SmashingConf hace unos escasos 6 meses, ésta funcionalidad todavía estaba en desarrollo y ninguna versión estable de ningún navegador la soportaba. Pero Jen dijo «creo que para el verano del 2017, prácticamente todas las versiones estables de todos los navegadores soportarán esta feature» y… bueno, parece que tenía razón.

Sin Grid no hay CSS Grid

Antes de hablar de CSS Grid, quizás deberíamos dedicar un par de minutos a hablar del diseño en parrilla de páginas web. Básicamente, una parrilla no es más que la estructura sobre la cual posicionarás los elementos de tu composición. Las parrillas consisten en un conjunto de líneas invisibles (columnas y filas, de hecho) que sirven de soporte para la maquetación. Esto que suena bastante abstracto se ve muy claro en la siguiente imagen:

Como puedes ver, la web presenta dos filas claramente diferenciadas: un bloque de bienvenida y otro con noticias. Los dos bloques se apoyan en un diseño de 12 columnas, pero lo hacen de forma diferente. Así, el primer bloque se divide en dos mitades: en la mitad izquierda destaca una noticia en concreto y en la mitad derecha presenta cuatro noticias. Por otro lado, el segundo bloque se divide en tres columnas del mismo tamaño.

Si has usado frameworks de maquetación web como Bootstrap de Twitter o Foundation, probablemente ya estés familiarizado con esta estructura de 12 columnas. El motivo de usar exactamente 12 columnas y no 10, por ejemplo, es la versatilidad que ofrece el número 12, porque tiene muchos factores (es divisible entre 1, 2, 3, 4, 6 y 12), así que podemos maquetar casi cualquier cosa con cierta facilidad.

En esencia, todo lo que necesitas saber sobre el diseño en parrilla es lo que te acabo de contar ? Pero como sé que eres una persona con mucha curiosidad, te dejo una muy buena introducción al tema de Ed Wassermann. ¡Ah! Y si eres un diseñador o maquetador web con experiencia, ya estás familiarizado con el diseño en parrillla y quieres aportar tu granito de arena y/o corregirme, te invito a que lo hagas en los comentarios; estoy seguro de que nuestros lectores te lo agradecerán ?

¿Cómo hacíamos las parrillas hasta ahora?

Las parrillas no son algo que hayamos inventado recientemente; llevan con nosotros muchísimos años. Pero si hablamos del mundo web, creo que es seguro afirmar que el auge de la maquetación con parrillas (¡y encima responsive!) llegó con los frameworks que te comentaba antes (Bootstrap y similares). Y, por lo tanto, tiene sentido ver cómo se diseña una web con parrilla usando alguno de estos frameworks.

Por ejemplo, si intentáramos maquetar la página de la BBC que hemos visto más arriba, el código HTML en Bootstrap sería parecido a este:

dando como resultado esto:

Como puedes ver, el código HTML que hemos escrito refleja claramente nuestra intención de montar una parrilla. De hecho, se parece mucho a lo que se hacía hace muchos años, cuando se maquetaban las webs usando tablas ?, cosa que en teoría se pretendía evitar con el combo HTML y CSS.

Por ejemplo, si nos centramos en el primer bloque vemos que tenemos un div dividido en tres columnas. Luego llenamos cada una de las columnas, pero tenemos que tener en cuenta que el elemento de la primera columna tiene que ser más alto que los demás, así que necesitamos especificar una altura concreta para ese elemento… Bastante engorroso, la verdad.

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

Un vistazo a CSS Grid

La solución al problema anterior se llama CSS Grid. CSS Grid es el sistema de maquetación más potente que hay disponible. Se trata de un sistema en 2D que nos permite definir filas y columnas (a diferencia de, por ejemplo, flexbox, el cual funciona en una única dimensión).

Para entender un poco mejor cómo funciona CSS Grid, lo mejor que podemos hacer es repetir el ejemplo de la BBC que acabamos de ver:

Como puedes ver, el código HTML se ha simplificado muchísimo respecto al que habíamos creado antes. Ahora, cada una de las secciones tiene una sencilla lista de noticias; no hay nada que indique cuál es la maquetación de la página. Si renderizáramos esta página «pelada», lo que veríamos es lo siguiente:

¿Cómo conseguimos darle el estilo que queremos? ¡Pues saltando al mundo del CSS, claro! Para poder definir la parrilla con CSS Grid, deberemos aplicar estilos al elemento contenedor (el cual definirá la «parrilla» en si) y a los elementos hijo (los cuales se convertirán en los items de la parrilla):

lo cual genera el siguiente resultado:

El código CSS que acabamos de crear especifica la parrilla sobre la que se montará la página. Sin hacer nada más, el propio navegador posiciona de forma automática cada uno de los elementos hijo (las noticias de la BBC) en su correspondiente celda. ¡Increíble! Aunque, bueno, el resultado que conseguimos es casi el que queríamos. ¿Qué ha fallado?

El primer bloque lo hemos dividido en tres columnas y dos filas (lo cual ha generado 6 celdas). El problema es que la primera noticia debía ocupar dos celdas (la primera columna de la primera fila y la primera columna de la segunda fila). Como no hemos especificado este requisito en ningún lado, la maquetación por defecto que ha salido no es exactamente lo que queríamos.

Arreglémoslo añadiendo una nueva regla para que el primer elemento de la sección header ocupe dos celdas:

con lo que, ahora sí, tenemos lo que queríamos:

Voilà! Ya tenemos una copia de lo que teníamos al principio, pero con una sencillez y elegancia brutales. CSS Grid nos ha permitido definir un código HTML super limpio y completamente independiente de la maquetación final. Fantástico, ¿no crees?

Recursos para aprender CSS Grid

Para empezar, te recomiendo que pruebes el juego CSS Grid Garden de Thomas H. Park. A lo largo de sus 28 niveles aprenderás todas las funcionalidades básicas (y no tan básicas) de CSS Grid de una forma divertida y amena:

Otros recursos (más completos y exhaustivos) para dominar el futuro de la web son:

• Guía completa de CSS Grid en CSS Tricks. No creo que esta web necesite muchas presentaciones… Aquí encontrarás todas las propiedades de CSS Grid, explicaciones detalladas sobre cada una de ellas y ejemplos de cómo usarlas. La web divide el contenido en dos columnas: las reglas que aplican al padre (la «parrilla») y las reglas que aplican a los hijos (los items).
• CSS Grid Layout en Mozilla. Aunque un poco menos completo que el recurso anterior, su sencillez te permite encontrar rápidamente el nombre de la propiedad que te interesa.
• Ejemplos de Grid. Una variada colección de ejemplos de parrillas. Si no sabes por dónde empezar, tener estos ejemplos puede ser muy útil ?

Conclusión

¡Por fin podemos separar la maquetación del contenido! Sin ninguna duda, CSS Grid va a revolucionar la forma en la que montas las páginas web. La potencia de esta herramienta es brutal y supera con creces todo lo que hemos estado haciendo hasta ahora. Te recomiendo que te familiarices cuanto antes con CSS Grid y que empieces a aplicarlo a tus proyectos.

El futuro de la web es hoy.

Imagen destacada de Dmitri Popov.