8 fragmentos de código que demuestran el poder de CSS Grid

A estas alturas, hemos visto algunos ejemplos impresionantes de lo que puede hacer CSS Grid. Pero parece que estamos empezando a arañar la superficie de lo que es capaz de hacer esta nueva forma de crear diseños.

A medida que los diseñadores continúan experimentando, no solo encuentran formas de resolver obstáculos comunes que se enfrentaron antes de que existiera CSS Grid, sino que también están dando un paso más. Estamos empezando a ver el potencial de implementar diseños únicos que quizás eran casi imposibles con otros métodos.

Exploremos algunos ejemplos de CSS Grid que van mucho más allá de lo común:

El zapatero virtual

Este impresionante fragmento recuerda a una exhibición de zapatos que puede ver en una tienda minorista, solo que mucho más divertido. Tiene un diseño similar al 3D, efectos de desplazamiento deslizantes y es totalmente receptivo. Y debido a que este diseño se ve increíble y se adapta cómodamente a muchos productos en un espacio pequeño, podría ser una forma efectiva de ayudar a los compradores a encontrar lo que buscan.

Vea la cuadrícula CSS de comercio electrónico isométrico de Pen por Andy Barefoot (@andybarefoot)

Póster verticalmente receptivo

Aquí hay un ejemplo de una obra de arte hecha completamente con un diseño de cuadrícula CSS y HTML; no se necesitan imágenes. Además, también responde verticalmente según la ventana gráfica. A medida que aumenta la altura de la ventana, también aumenta el tamaño del póster.

Vea el póster artístico de la cuadrícula de CSS de la pluma (verticalmente sensible) de George W.Park (@GeorgePark)

Apropiado en

¿Quién no ama un buen juego de Tetris? Lo que tenemos aquí es un diseño inspirado en el videojuego clásico. Las distintas piezas utilizan una combinación de cuadrícula CSS, trazados de recorte y variables CSS para garantizar que cada pieza encaja a través de múltiples puntos de interrupción.

Vea las piezas de Pen CSS Grid Tetris con variables CSS de Stephen Lee (@abcretrograde)

Composiciones de Mondrian

Recrear un conjunto de composiciones de Mondrian proporciona un desafío digno para CSS Grid, uno que supera con gran éxito. Estos complejos diseños de formas geométricas nos proporcionan un ejemplo atractivo del control granular que ofrece la técnica de diseño.

Vea las composiciones de Pen 3D CSS Grid Mondrian de Pete Barr (@petebarr)

Teclado de Apple

La complejidad finamente detallada de la distribución de un teclado podría hacer llorar incluso a los diseñadores más talentosos. Pero CSS Grid está ahí para manejar esas pequeñas peculiaridades y ayudó a hacer este ejemplo perfecto en píxeles (es posible que desee verlo en una pantalla grande para obtener el efecto completo). ¡Incluso puedes tocar las teclas!

Vea el teclado Pen Apple de Jon Kantner (@jkantner)

Galería de fotos receptiva

Las galerías de fotos son un área del diseño web que está lista para un impulso creativo. Aquí tenemos una galería que aprovecha las posibilidades de diseño de CSS Grid, junto con máscaras de imágenes que crean fotos con formas únicas. El resultado es algo que se destaca en un género en el que cada vez es más difícil de hacer.

Vea la galería Pen Responsive con CSS Grids de yoksel (@yoksel)

Una nueva navegación

La navegación se puede hacer infinitamente más interesante con la ayuda de CSS Grid. Haga clic en este menú de ejemplo y podrá ver el potencial de crear algo hermoso y bien organizado. Y el hecho de que las cuadrículas a menudo se pueden cambiar sin una tonelada de código significa que los menús pueden evolucionar junto con su sitio.

Vea los paneles de menú de cuadrícula de CSS del lápiz por Ryan Mulligan (@hexagoncircle)

Monopolizando la red

Las cosas que los diseñadores de impresión dan por sentado han dejado a los diseñadores web añorando el día en que ellos también podrían aprovechar. Un juego de mesa como Monopoly es lo suficientemente simple para imprimir pero increíblemente complicado para la web. Esta fiel interpretación del juego clásico es una prueba de que ahora tenemos un nuevo conjunto de herramientas a nuestra disposición.

Vea el tablero Pen Monopoly de John Coppola (@johnnycopes)

Impulsando la Web

Quizás el aspecto más impresionante de CSS Grid es que ha inspirado la imaginación de los diseñadores web sin dejar de ser tan temprano en su existencia útil. Y aunque su trabajo más importante es resolver los requisitos de diseño diarios de los sitios web, estamos empezando a ver que puede hacer mucho más.

Será interesante ver a dónde lleva CSS Grid la web a medida que se implementa cada vez más.