Ejemplos de CSS Grid en producción

 

El futuro es ahora. Y ahora. Y ahora. Bueno, ya sabéis a lo que me refiero. Y si hablamos sobre el futuro del diseño web, uno de los temas que se suelen tratar es CSS Grid. Cientos de artículos mostrando sus bondades y miles de tutoriales en diferentes webs, que nos avisan de que debemos estar preparados para cuando llegue al mainstream. Pero en Silo Creativo no estamos totalmente de acuerdo. No pensamos que CSS Grid es el futuro del diseño web: creemos firmemente que ya es su presente.

Y lo de que es el presente lo queremos dejar muy claro, porque en varios de los artículos de los que hemos hablado sobre Grid, muchas veces han surgido por diferentes partes las mismas sentencias y dudas. Gente que le maravilla la facilidad y sencilla curva de aprendizaje que tiene Grid con respecto a los antiguos métodos de maquetación y posicionamiento. Pero que mejor seguir con los floats, para evitar problemas de compatibilidad con navegadores web. Porque ya tendremos tiempo de agregar Grid a nuestro flujo de trabajo en el futuro.

En parte llevan razón, porque aún quedan algunos navegadores que no son compatibles con Grid. Pero como vemos en la web de Can I Use…, estos apenas representan un 13% del total. Yendo mes a mes reduciéndose este porcentaje. Además, de que tenemos disponibles herramientas CSS como los Feature Query, que nos dan la posibilidad de usar los clasicos floats junto a Grid en nuestros proyectos. Quitándonos de un plumazo los posibles problemas de compatibilidad. Aparte de asegurarnos que nuestra web estará preparada para cuando los navegadores estén completamente adaptados a Grid.

Por estos motivos, desde Silo Creativo queremos que perdáis el miedo a usar CSS Grid. Y que mejor manera que viendo diferentes webs en producción que ya han incorporado esta herramienta CSS. Todas estas páginas, y más, están recopiladas en GridExamples, un sideproject que creamos hace unas semanas. En el cual vamos añadiendo diferentes webs de diferentes temáticas que vamos encontrando, o que nos envían al formulario de GridExamples.

Pero antes de meternos de lleno en el listado, queremos mostraros como el uso del navegador web puede facilitarnos no solo la búsqueda de web que hagan uso de Grid. Sino también ver como están construidas, e inspirarnos para la creación de nuestros propios proyectos.

CSS Grid y el inspector web: dos grandes aliados

Además de los numerosos tutoriales sobre Grid que podemos encontrar en multitud de sitios, incluido en Silo Creativo, tenemos más herramientas con las que podemos investigar. Siendo una de las más socorridas el inspector de nuestro navegador web. Si quieres saber más sobre como usar el inspector de tu navegador web, puede leer el artículo que escribimos al respecto en Silo Creativo.

Para este caso, y como estamos hablando de CSS Grid, usaremos el Mozilla Firefox. Y es que desde la versión 52 de este navegador, nos será más sencillo encontrar la declaración display: grid cuando estemos inspeccionando el CSS de una web, gracias a un pequeño icono de una rejilla. Pero desde la versión 57, lanzada en septiembre de 2017, el propio inspector tiene un panel propio para Grid.

Con situarnos sobre el panel Disposición, veremos todas las opciones disponibles. Podemos activar cada una de las rejillas que tenga una web, para verlas de manera gráfica. Además de poder ver el número de cada linea del Grid, y el nombre de cada área. Esto nos da, no solo el saber con un mínimo esfuerzo si una web esta utilizando Grid Layout o no. También, nos ofrece la posibilidad de ver directamente el formato de rejilla que está usando, y hacernos una mejor idea de como está trabajando el CSS por detrás. Os animamos a que lo veáis y experimentéis con este nuevo panel por vosotros mismos!

Como ejemplo, si entráis en la web de GridExamples, podéis ver como se disponen las rejillas para crear la cuadrícula de web de la portada.

inspector firefox grid
Así se ven las rejillas en la web de GridExamples, gracias al inspector de Firefox

Algunos ejemplos de uso de Grid Layout

Este listado no solo pretende ser un muestrarios de los mejores diseños de webs reales que hemos descubierto, o nos han enviado a GridExamples. También queremos enseñaros como algunas webs de empresas o instituciones conocidas ya se han adaptado a esta nueva realidad. Quizás, gracias a ellas, el paso a Grid lo podáis hacer con menos miedo, y más esperanza sobre el nuevo abanico de posibilidades que vais a tener.

Slack


La archiconocida herramienta de mensajería tiene un diseño web muy simple, pero que gracias al uso de Grid posiciona cada uno de sus elementos perfectamente. Además de adaptarlos de forma fluida según sea el tamaño de nuestro dispositivo. Un gran ejemplo de que Grid no solo sirve para hacer diseños rocambolescos o vistosos. Sino que también es ideal para diseño sencillos, o simplemente crear una cuadricula de logotipos de forma efectiva.

Medium

Posiblemente la red social para textos y artículos más conocida del mundo.  En su portada, su diseño asimétrico de imágenes y textos es un ejemplo perfecto de como Grid no solo sirve para crear rejillas explícitas. Se mezclan tanto entradillas de artículos sin imágenes, imágenes en gran formato con textos, o esta misma disposición pero a menor tamaño. A la espera estamos de que actualicen completamente la web, y adapten Grid también para los artículos completos.

Slate

En contraposición a lo que hemos visto hasta ahora, con la revista Slate tenemos un CSS mucho más complejo. Si nos paramos a inspeccionar su CSS, veremos la existencia de 17 rejillas diferentes. Prácticamente cada elemento de la web tiene su propia rejilla, lo que hace que tener diferentes maquetaciones en cada parte, sin condicionar su diseño general. Como ya vimos en el artículo de Ricardo, Grid y el diseño editorial se presentan como grandes aliados.

Addons para Mozilla Firefox

Mozilla es uno de los grandes abanderados del uso de Grid. Como muestra, el canal de Youtube de nuestra admirada Jen Simmons, el cual nunca dejaremos de recomendar. Y la web de extensiones para Firefox es una muestra de que Mozilla quiere dar ejemplo del uso de Grid. Cualquier elemento, por pequeño que sea, se posiciona dentro de la estructura general de la web mediante Grid. Desde el más mínimo icono, hasta el logo principal.

Hidde de Vries

Hidde de Vries ha sido una de las personas que nos contactó mediante el formulario que tenemos en GridExamples para que añadiésemos su web al repositorio. Cosa que gustosamente hicimos. Porque es una muestra perfecta de como los desarrolladores y diseñadores web, en sus propias páginas y portafolios personales, están probando y adaptando Grid, como primer campo de batalla. Que mejor manera de enseñar al mundo que sabes manejar una herramienta, que dando muestra de su uso en tu propia casa.

Hesburgh Libraries

Como todo no van a ser empresas, traemos la web de la biblioteca Theodore Hesburgh, en Indiana (EEUU). A destacar el uso de las rejillas para la construcción del buscador de la biblioteca. Además de para el posicionamiento de los diferentes servicios, que son responsive para adaptarse a todo tipo de pantallas.

Sony Developer World

De todo este listado, quizás sea la web de la empresa más grande. Una señal inequívoca de como todo tipo de empresas se están sumando a usar en sus webs Grid Layout. Como pasa en otras páginas, en el inspector podemos ver como tiene multitud de rejillas diferentes, cada una de ellas adaptadas según las necesidades de cada sección.

Ada x Margaux

Por último, queríamos mostrar una landing page de una invitación de boda. Y es que destaca por no tener un diseño usual, gracias al uso de esos grandes rombos, y los textos inclinados. Una muestra perfecta para ver algunos de los diseños que podemos llegar a conseguir.

Si queréis ver más ejemplos, no tenéis más que entrar en GridExamples, donde habitualmente vamos agregando nuevas webs. Y si tenéis algún ejemplo más, podéis dejarlo en los comentarios, o escribirnos al formulario de GridExamples, donde lo añadiremos para seguir ampliando el repositorio. Y que todos podamos disfrutar, y seguir aprendiendo nuevos diseños creados con CSS Grid!

Deja una respuesta

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