Hoy lanzamos una actualización masiva y una serie de mejoras para el diseño de cuadrícula que harán que crear diseños responsivos basados en CSS grid sea más fácil que nunca.
Contexto: CSS grid 1.0
El lanzamiento de CSS grid en octubre de 2018 supuso un gran paso adelante para el diseño en Webflow. Pero también introdujo dos problemas:
- Flujos de trabajo de diseño responsivo complicados. Los elementos hijos de la cuadrícula posicionados manualmente debían ajustarse para cada punto de interrupción, y los cambios en la propia cuadrícula entre puntos de interrupción requerían reposicionar los elementos para que encajaran en el nuevo conjunto de filas y columnas.
- Sin soporte para listas de colección. Al no haber una lógica que controlara cómo distribuir los elementos hijos dentro de la cuadrícula principal, no había forma de admitir listas de colección impulsadas por el CMS, listas de productos de comercio electrónico o listas de resultados de búsqueda.
Afortunadamente, el lanzamiento de hoy resuelve ambos problemas y añade mucha más potencia al diseño de cuadrícula CSS en Webflow.
Grid 2.0: Hacer que el diseño responsivo sea aún más fácil
El lanzamiento de hoy incluye muchas novedades, y casi todas facilitan considerablemente el diseño de cuadrículas responsivas. Echemos un vistazo a cada nueva función y exploremos algunos de los nuevos diseños y posibilidades que ofrece cada una.
Posicionamiento de flujo automático: un nuevo valor predeterminado
Lo más destacado es que el lanzamiento de hoy introduce un nuevo modo predeterminado para el posicionamiento de los elementos hijos de la cuadrícula: el flujo automático (autoflow). Cuando un elemento hijo de la cuadrícula se configura con posicionamiento de flujo automático, se colocará automáticamente en la siguiente celda disponible al añadirlo a la cuadrícula. (El posicionamiento manual, que permite "anclar" los elementos hijos en una posición fija específica dentro de la cuadrícula, sigue estando disponible manteniendo pulsada la tecla Mayús mientras arrastras elementos a la cuadrícula, o alternando la configuración del elemento hijo en el panel de estilos).
El posicionamiento de flujo automático es especialmente útil al ajustar el diseño para dispositivos más pequeños, ya que puedes simplemente eliminar columnas y ver cómo los elementos de la cuadrícula se desplazan a la siguiente celda disponible, sin necesidad de realizar ajustes por dispositivo.
Soporte para listas de colección y productos de comercio electrónico
El posicionamiento de flujo automático facilita ahora la creación de cuadrículas de listas dinámicas basadas en contenido, como las colecciones del CMS y las listas de productos de comercio electrónico, así como páginas de resultados de búsqueda y cuadrículas de contenido estático.
Auto-fit (también conocido como "magia responsiva")
Junto con la introducción del posicionamiento de flujo automático para los elementos de la cuadrícula, llega el soporte para auto-fit, que te permite establecer dimensiones mínimas y máximas para filas y columnas, y hacer que la cuadrícula genere automáticamente filas y columnas según sea necesario para seguir esas reglas y distribuir el contenido. Esto permite crear un diseño que funciona en cualquier tamaño de pantalla, sin necesidad de realizar ajustes por punto de interrupción.
Denso
Aunque el posicionamiento de flujo automático y auto-fit facilitan la creación de diseños adaptables para cualquier dispositivo, la naturaleza "automática" con la que crean filas y columnas puede generar huecos extraños cuando los elementos de la cuadrícula no encajan a la perfección.
Al activar la opción "denso" en tu cuadrícula, el sistema intentará rellenar esos huecos redistribuyendo los elementos en las celdas vacías. Esta opción es especialmente útil cuando tienes una cuadrícula que combina flujo automático con elementos posicionados manualmente, ya que "denso" puede ocupar los espacios que se crean cuando los elementos de flujo automático intentan rodear a un elemento posicionado manualmente.
Una nota sobre accesibilidad
Aunque usar "denso" puede ser un truco muy útil para que tu diseño no se vea raro en ningún ancho de pantalla, ten en cuenta que puede causar problemas de accesibilidad para quienes usan lectores de pantalla, ya que a menudo organiza el contenido en un orden que no coincide con tu HTML original.
Crea diseños con CSS grid, visualmente
Descubre la facilidad, velocidad y potencia sin precedentes de CSS grid en Webflow, ahora con nuevos controles directamente en el lienzo.
Dónde aprender sobre cuadrículas
Si aún no has experimentado con las cuadrículas o quieres ponerte al día con las últimas novedades de esta versión 2.0, el mejor lugar es nuestro curso de cuadrículas recién actualizado en Webflow University.
También tenemos una serie de diseños clonables basados en cuadrículas que puedes obtener en nuestra página de showcase; algunos son totalmente nuevos e incluyen vídeos tutoriales, mientras que otros muestran las funciones de posicionamiento manual de nuestra versión inicial.
Lo que viene a continuación
El lanzamiento de hoy completa nuestro trabajo principal para añadir soporte de CSS grid a Webflow, pero aún tenemos algunas cosas en desarrollo: principalmente, el soporte para áreas de cuadrícula.
Definir áreas de cuadrícula te permitirá estructurar tu diseño antes de añadir el contenido y, una vez añadido, facilitará la reorganización de grandes grupos de elementos en diferentes puntos de interrupción. Estamos en la fase final de desarrollo y pruebas, así que mantente atento a las novedades.
¿Qué vas a crear con estas nuevas funciones? Para unirte a la conversación sobre este lanzamiento, participa en nuestro foro o deja un comentario más abajo.
