Como vemos en la regla de los tercios de la fotografía y en la portada de cualquier periódico, las cuadrículas proporcionan una lógica visual que aporta orden al diseño, especialmente en el diseño web.
CSS grid solía ser un dolor de cabeza, incluso si conocías CSS. La función CSS grid de Webflow facilita abordar esta técnica de diseño, incluso sin saber programar. Echa un vistazo a estos 12 diseños, todos hechos en Webflow, que aprovechan el poder de diseño de CSS grid.
1. Straw Dogs
Una excelente manera de aprender una nueva práctica de diseño es aplicarla a un proyecto personal. El riesgo es bajo y te da la oportunidad de entender el proceso antes de lanzarte a usarlo en el trabajo para clientes.
Este sitio web de Straw Dogs es solo una página de aterrizaje que enlaza a la página de Wikipedia de esta película de 1971 (que inspiró Reservoir Dogs de Tarantino), pero es un buen ejemplo de cómo empezar poco a poco.
Este sitio presenta una cuadrícula con siete columnas (una columna estrecha a cada lado) y cinco filas. También hay bloques div dentro de la cuadrícula para las letras grandes, líneas y formas que componen el diseño. Echa un vistazo más de cerca a cómo se construyó en el Webflow Designer.
La cuadrícula también funciona de maravilla para el diseño responsivo, ya que puedes reposicionar manualmente los elementos según sea necesario —¡directamente en el lienzo!— para cada tamaño de pantalla.
2. Cuadrícula japonesa
Las cuadrículas están por todas partes. Esta cuadrícula de estilo japonés se inspiró en una pared de exhibición de un espacio comercial. Imita las estanterías, traduciendo un diseño del mundo real a un diseño digital. La próxima vez que veas una cuadrícula, ¡hazle una foto y úsala como inspiración para tu propio trabajo de diseño!
Clona esta cuadrícula japonesa y hazla tuya.
3. Cara sonriente
Vale, ya hemos mencionado cómo CSS grid ancla los elementos a posiciones tanto horizontales como verticales. Así que, ¿por qué no divertirse un poco y aprovechar la cuadrícula para crear gráficos de estilo retro? Esta cara sonriente es tanto nostalgia de píxeles grandes como un ejemplo de CSS grid.
La imagen es solo una cuadrícula de 15 x 15, a la que llamamos "cajas" en el diseño. Cada caja tiene un color de fondo diferente indicado por su clase combinada. Puede sonar difícil, pero en realidad no lo es; echa un vistazo al tutorial de Webflow University sobre clases combinadas.
¿Te sientes inspirado para expresarte a través de píxeles? Clona este diseño basado en cuadrícula como plantilla para tus propias creaciones de 8 bits.
4. Clase magistral de cuadrícula
Afirmar que tu cuadrícula es una "clase magistral" es una declaración bastante audaz. Y si estás pensando en usar CSS grid por tu cuenta, grid masterclass es un gran lugar para comenzar tus estudios.
Aunque parece que hay mucho movimiento en este diseño, no es complicado: es solo una cuadrícula de 4 x 4 con bloques div que contienen las imágenes y el texto. Los divs varían en la cantidad de espacios que ocupan, creando una variedad de tamaños de bloques de contenido. Bastante fácil, ¿verdad?
Este es otro diseño basado en CSS grid que puedes clonar y usar en tu propio diseño.
5. The Soft Machine, Third
Como fan tanto de CSS grid como de la música psicodélica inspirada en la fusión de The Soft Machine, me emocionó ver esto en la galería.
Este diseño se basa en una cuadrícula de 4 x 3. Como se vio en el ejemplo anterior, se utilizan bloques div. Estos bloques contienen las imágenes y texturas que componen los gráficos. También se usan bloques div para elementos como la animación LISTEN NOW y la descripción de la banda en la parte inferior izquierda.
Echa un vistazo a The Soft Machine design on Webflow para ver cómo se combinan la cuadrícula y los bloques div.
6. Recreación de Mondrian
Como fanáticos del diseño, ¿quién de nosotros no se ha parado frente a una de las pinturas abstractas de Piet Mondrian y ha pensado: "¡Oye, eso quedaría genial como diseño de sitio web!"?
Piet Mongrid es una recreación de la pintura de Piet Mondrian “Composición con gran plano rojo, amarillo, negro, gris y azul”, todo construido usando una cuadrícula CSS.
Los bloques div conforman cada cuadrado en esta cuadrícula de 16 x 16. Cada uno de estos bloques tiene un tamaño diferente, con distintos colores de fondo y un borde verde oscuro.
¿Tienes curiosidad? Echa un vistazo a cómo se hizo Piet Mongrid en Webflow. También puedes clonarlo y crear tus propias obras minimalistas. Y no te pierdas Responsive Mondrian: una demostración de CSS grid de Jen Simmons de Layout Land.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
7. Bloques de color
Esto se parece un poco a la cuadrícula de Mondrian de arriba, ¿verdad? Pero aquí los colores cambian a medida que el efecto al pasar el ratón gira su posición. Color Blocks aporta algo de movimiento a la cuadrícula CSS.
Aunque este diseño tiene un impacto visual enorme, se basa en una sencilla cuadrícula de 8 x 8. Los colores que cambian de verde a azul son una acción temporizada que se puede configurar con las interacciones de Webflow. La animación al pasar el ratón se crea con transiciones y transformaciones de Webflow. Todos estos elementos dinámicos son fáciles de configurar.
Para ver más de cerca cómo se montó Color Blocks en Webflow.
8. Cuadrículas y verduras
Aunque no podemos verificar la ciencia detrás de la afirmación de que cuadrículas saludables equivalen a sitios web saludables, Grids and veggies ciertamente presenta un argumento sólido a favor de esa correlación.
Las filas en la cuadrícula de 4 x 3 tienen cada una un ancho diferente. El bloque de texto con “Healthy Grids = Healthy Websites” está en un bloque div dentro de la cuadrícula y utiliza un efecto de suavizado interactivo que lo desplaza a su lugar.
Echa un vistazo a la página de la galería de Grids and veggies.
9. Cuadrícula modernista
Modernist CSS grid es otro experimento de cuadrícula CSS inspirado en el arte minimalista. La Abstracción n.º 9 de Karl Benjamin es la musa detrás de este diseño. Al igual que la cuadrícula de Mondrian y el ejemplo de cuadrícula CSS inspirado en videojuegos mencionado anteriormente, este diseño se logra pintando con píxeles. Cada marco de esta cuadrícula de 10 x 6 está hecho con bloques div de color naranja, morado, amarillo o rojo.
Mira cómo se construyó Modernist CSS grid en Webflow.
10. Degradado de cuadrícula al pasar el ratón
¿Te impresionó el efecto de degradado al pasar el ratón en la página de lanzamiento de CSS de Webflow? ¡A mí sí! Los bloques de color que se desvanecen suavemente crean un efecto deslumbrante que no requiere mucho esfuerzo.
Este degradado al pasar el ratón es simplemente una cuadrícula blanca de 8 x 11 bloques que se superpone a un degradado lineal con un efecto de desvanecimiento. Cada bloque es una ventana que revela una porción del degradado lineal.
Mira cómo funciona el degradado de cuadrícula al pasar el ratón. O clónalo, si te apetece.
11. Cuadrícula de planetas
De la mano de Nelson Abalos Jr., de Webflow, Cuadrícula de planetas es un excelente ejemplo de cómo las cuadrículas CSS mantienen el contenido organizado.
Los elementos principales de este diseño se mantienen mediante una cuadrícula de 3 x 1. Eso es todo: tres columnas y una fila. Hay un flexbox integrado en la cuadrícula para el bloque de contenido "Ese somos nosotros" a la izquierda. Y en la columna del extremo derecho hay tres filas de acordeón. Las interacciones añaden un toque agradable a este diseño sencillo.
Nelson tuvo la amabilidad de crear un vídeo tutorial. Y puedes clonarlo, ¡gratis!
12. Cómics de Marvel
Aunque no es un sitio web oficial de Marvel, este es otro ejemplo de alguien que crea un sitio web simulado sobre algo que le apasiona.
Los cómics se basan en cuadrículas. Cada viñeta es un marco individual en la narrativa visual. Este diseño recrea la sensación de una página de cómic. Cada panel forma parte de una cuadrícula de 5 x 4 que utiliza CSS personalizado para lograr los trazados de recorte.
Clona este sitio inspirado en Marvel o visualízalo en Webflow para ver cómo se hizo.
Deja que las cuadrículas CSS sean tu guía
La cuadrícula CSS te da el poder de añadir estructura a tu diseño, crear diseños adaptables y fijar elementos en posiciones horizontales y verticales.
Si alguna vez te has sentido intimidado por la cuadrícula CSS, crear diseños de cuadrícula en Webflow es un excelente punto de partida. Te animamos a que te lances y empieces a experimentar. Si tienes alguna pregunta, estaremos encantados de responderla en los comentarios a continuación.
¡Feliz diseño de cuadrículas!
