Silberturm, de Dmitri Popov

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.

Usando el futuro posicionamiento de elementos GRID
Ejemplo de composición de un cartel publicitario en HTML y CSS, usando la funcionalidad CSS Grid que, por fin, tenemos disponible en nuestro navegadores. Bonito, ¿verdad?

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:

Parrilla de 12 columnas de la web de la BBC
Parrilla de 12 columnas de la web de la BBC. (Fuente).

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:

Maquetando una página con Bootstrap
Resultado de la maquetación de la página de la BBC usando Bootstrap.

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.

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:

Página de la BBC sin estilos de maquetación
Página de la BBC sin estilos de maquetación.

¿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:

Página de la BBC maquetada con CSS Grid automáticamente
Página de la BBC maquetada con CSS Grid, cuando todavía no hemos especificado que la primera noticia ocupa dos celdas.

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:

Página de la BBC maquetada con CSS Grid
Página de la BBC perfectamente maquetada con CSS Grid.

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:

CSS Grid Garden
Aprende CSS Grid con este juego interactivo.

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.

16 respuestas a «CSS Grid: el futuro del diseño web ya está aquí»

  1. Avatar de Victor
    Victor

    Excelebte articulo. Esto hay que aprenderlo cuanto antes

    1. Avatar de David Aguilera

      Gracias, Victor. Coincido contigo 😉

  2. Avatar de Dryant

    Parece bastante interesante!!
    Llevo mucho usando Bootstrap, empezaré a mirar Css Grid a ver que tal!
    Gracias!!

    1. Avatar de David Aguilera

      ¡Genial! Y cuando lo hayas probado, no olvides compartir tu experiencia con nosotros 😀

  3. Avatar de Daniel
    Daniel

    ¡Gracias David! Me pareció muy interesante el artíclo y se nota la pasión en él. Definitivamente me familiciaré con CSS Grid.

    1. Avatar de David Aguilera

      Gracias a ti, Daniel. Un placer saber que os gustan mis artículos 🙂

  4. Avatar de Omar

    Y dejaríamos de lado totalmente los frameworks? como podríamos solventar las opciones en jquery que te dan los frameworks?

    Buen artículo gracias, saludos de México

    1. Avatar de David Aguilera

      Hola Omar,

      No creo que CSS Grid acabe con los frameworks. React, Angular, Vue, Backbone… Hay un montón de frameworks cuyo ámbito va más allá de la simple «maquetación», así que eso no desaparecerá. De hecho, creo que muchos de los frameworks que usamos ahora se simplificarán usando las nuevas herramientas disponibles por debajo.

      Un saludo,
      David

  5. Avatar de A
    A

    Y el resultado sería responsive? Si es así en definitiva soluciona horas de trabajo.
    Buen artículo!

    1. Avatar de David Aguilera

      Efectivamente, sería responsive. De hecho, puedes incluso usar directivas @media para definir parrillas totalmente diferentes para diferentes tipos de pantalla.

  6. Avatar de Camilo
    Camilo

    Interesante artículo, aunque no es oro todo lo que reluce. Se simplifica el código HTML, sí, pero a costa de añadir complejidad al CSS. Personalmente, antepongo un código HTML «menos» legible (cosa que no creo que sea cierta) a tener que añadir CSS.

    1. Avatar de David Aguilera

      ¡Muchas gracias por tu aporte! De todas formas, no estoy de acuerdo con tu observación: si quieres maquetar una página en una parrilla, es mucho más sencillo y legible (tanto en HTML como en CSS) hacerlo con CSS Grid (que para eso se diseñó) que montando estructuras HTML raras y luego llenar el CSS de float, table, flex… 😉

    2. Avatar de Jenice Vazquez

      Coincido con Camilo, ademas bootstrap no solo es el GRID, al hacer sistemas web donde lo importante es la funcionalidad, me puedo concentrar en esos procesos y olvidarme casi completamente del diseño y aun así tener pantallas lindas. Crear media queries? De cualquier forma estaré viendo de cerca y dándole su oportunidad a CSS GRID n.n

      1. Avatar de David Aguilera

        Al final, todo son herramientas a nuestro alcance, así que esta evolución es siempre positiva 🙂

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.