Desde la presentación de la especificación original de CSS grid en 2012 —y en el último año, a medida que grid ha logrado un amplio soporte en los navegadores—, diseñadores y desarrolladores han estado reimaginando lo que podemos construir para la web. Hoy, traemos el poder de este sistema de diseño a Webflow para que puedas ayudar a impulsar esa frontera.
¿Qué es CSS grid?
Se ha hablado mucho sobre CSS grid durante el último año y medio aproximadamente, pero es posible que muchos de ustedes todavía se pregunten: "¿Qué rayos es grid?"
En resumen, es un sistema de diseño completamente nuevo, similar en algunos aspectos a flexbox, pero que ofrece mucho más control sobre los aspectos horizontales y verticales de tu diseño.
El diseño de cuadrícula (grid) en Webflow toma prestado directamente de CSS grid, introduciendo un sistema totalmente nuevo para organizar elementos de diseño dentro de una página, y viene con un conjunto de controles en el lienzo que realmente lo distinguen de las opciones de diseño existentes en Webflow.
El resultado es una forma más fácil, rápida e intuitiva de crear diseños, sin sacrificar la calidad del código.
Si quieres ver de cerca cómo funciona grid en Webflow, echa un vistazo a esta demostración del taller de adelantos del mes pasado.
Grid frente a flexbox: ¿cuál es la diferencia?
Primero, grid no pretende reemplazar a flexbox; como aprenderás, ambos sistemas pueden trabajar muy bien juntos.
En cambio, el beneficio principal de crear diseños con CSS grid es que puedes establecer reglas de posicionamiento en dos dimensiones (horizontal y vertical), a diferencia de la única dimensión que puedes controlar en flexbox (horizontal o vertical).
La flexibilidad del diseño de cuadrícula
La bidimensionalidad de CSS grid te permite construir diseños complejos y adaptables más rápido, porque podrás reposicionar y cambiar el tamaño de los elementos en cualquier lugar dentro de la cuadrícula que definas, en lugar de tener que anidar un div tras otro para lograr el mismo efecto.
Diseño de cuadrícula en diferentes puntos de interrupción
Esta flexibilidad en el posicionamiento también genera grandes beneficios al diseñar para diferentes puntos de interrupción, ya que puedes rediseñar completamente tus composiciones sin cambiar el orden real o el marcado de los elementos.
Recursos para los más técnicos
Para profundizar en los detalles técnicos de la especificación de CSS grid (es decir, el código), recomendamos visitar el canal de YouTube de Jen Simmons, específicamente Basics of CSS Grid y Flexbox vs. Grid. O si quieres aprender más sobre la historia detrás de este nuevo sistema, consulta The Story of CSS Grid, from Its Creators en A List Apart.
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.
Cómo aprender a usar Grid en Webflow
Vale, sabemos que es mucha información. Respira hondo a la de tres: una, dos, tres... ¿Ya te sientes mejor?
Genial. Estamos aquí para ayudarte. Aquí tienes dónde acudir si quieres aprender a diseñar con este nuevo sistema de cuadrículas en Webflow.
Nuevo curso en Webflow University
Nuestro nuevo curso de Webflow University te introduce a los conceptos básicos de Grid y te ayuda a entender algunos de los términos y unidades nuevos exclusivos de CSS Grid. Pero esto es solo el principio: publicaremos ocho vídeos de reconstrucción de diseños de ejemplo en las próximas semanas, así que no les pierdas la pista.
Diseños de cuadrícula clonables
Además del curso en Webflow University, hemos creado cuatro diseños clonables que muestran algunas de las ventajas únicas que ofrece Grid.
Siéntete libre de clonarlos para analizar cómo están hechos, reutilizar piezas o simplemente inspirarte.
Zona de pruebas de Grid
¿Tienes curiosidad por Grid pero no sabes por dónde empezar? Dirígete a nuestra zona de pruebas de Grid para experimentar el poder de Grid de una forma divertida e interactiva. Aquí te retaremos a recrear cuatro diseños icónicos basados en cuadrículas dentro de Webflow. Porque toda buena zona de juegos viene con diversión —y juegos—, ¿verdad?
Un poco de historia: cuando investigamos diseños famosos basados en cuadrículas para recrearlos, encontramos varios ejemplos de mujeres diseñadoras que han sido pioneras en el uso de Grid dentro de la industria.
Como gestora de producto en Silicon Valley, ver su trabajo y recrearlo en el producto que hemos construido ha sido una fuente de inspiración. Paula Scher, Susan Kare, Muriel Cooper y Elaine Lustig Cohen utilizaron cuadrículas como base de algunas de sus obras más famosas, y es un honor celebrarlas en nuestra función.
¿Qué es lo próximo para Grid en Webflow?
Aunque el lanzamiento de hoy pone gran parte de la especificación de CSS Grid bajo tu control en Webflow, tenemos mucho más planeado. Esto es lo que está por llegar para Grid.
Aún más potencia de CSS Grid
En las próximas actualizaciones, añadiremos funciones adicionales como auto-placement, autofit, dense y la notación repeat. Estas funciones avanzadas te facilitarán aún más la creación de diseños adaptables que funcionan casi por arte de magia.
Compatibilidad de Grid con listas de colecciones
Debido a que el número de elementos en una lista de colección es dinámico, organizar estos elementos como si fueran un conjunto de elementos estáticos... simplemente no funciona. Por esta razón, Grid aún no está disponible como modo de visualización para las listas de colecciones.
Dicho esto, estamos trabajando para añadir esta compatibilidad mediante el algoritmo de colocación automática de CSS grid, que ubica los elementos hijos en celdas sucesivas y añade filas según sea necesario para que el contenido fluya por la página.
Más controles de cuadrícula en el lienzo
Además de los controles que ya presentamos para añadir filas y columnas, y para cambiar el tamaño y la posición de los elementos hijos, pronto lanzaremos controladores de arrastre para ajustar filas, columnas y espacios directamente en el lienzo (por ahora, puedes gestionarlos desde el panel de estilos a la derecha del Diseñador).
Define tus propias áreas de cuadrícula
Las áreas de cuadrícula te permiten visualizar tu diseño sin necesidad de añadir contenido. Esto facilitará enormemente la creación de cuadrículas reutilizables que podrás adaptar a cualquier pantalla sin tener que complicarte con la posición de cada elemento.
Participa
¿Qué tienes ganas de construir? Cuéntanoslo en los comentarios y comparte tus creaciones en Twitter con el hashtag #WebflowGrid. ¡Estamos deseando ver lo que haces!
