Un buen diseño es un diseño basado en cuadrículas. (La mayor parte del tiempo). Al usar la cuadrícula, obtienes consistencia visual en tus páginas, añades lógica a tus diseños y respetas un conjunto de reglas que facilitan tu trabajo y mejoran tus resultados.
Un buen diseño es un diseño basado en cuadrículas. (La mayor parte del tiempo). Al usar la cuadrícula, obtienes consistencia visual en tus páginas, añades lógica a tus diseños y respetas un conjunto de reglas que facilitan tu trabajo y mejoran tus resultados.
Descubre cómo hacer que los contenedores flex se lleven bien con el sistema de cuadrícula nativo de Webflow y crea diseños más lógicos.
¿Qué es flexbox en CSS?
Flexbox es una herramienta de diseño súper potente en CSS que te permite crear contenido expandible en una página web, especialmente filas y columnas. Antes de flexbox, los diseñadores web usaban floats para sacar el contenido de los elementos de bloque tradicionales en una página. Los floats son problemáticos porque requieren varios trucos y soluciones alternativas. Flexbox simplifica este proceso, permitiéndote crear diseños geniales con facilidad.
Esta lección explica cómo funciona Flexbox en Webflow y cómo usarlo para crear diseños flexibles basados en CMS que se adaptan perfectamente a cualquier tamaño de pantalla.
CSS grid vs flexbox: ¿Cuál es la diferencia?
CSS grid es otra herramienta potente que facilita la creación de diseños increíbles. Pero surge la pregunta: ¿CSS grid reemplaza a flexbox? No exactamente. CSS grid puede hacer cosas que flexbox no puede, y viceversa.
Aquí está la gran diferencia entre estas dos herramientas:
- Flexbox — Se usa para alinear elementos en una dirección
- CSS grid — Se usa para alinear elementos en dos direcciones
Si quieres una comparación más detallada de estas dos herramientas, consulta esta hoja de trucos de CSS grid y flexbox para obtener consejos y trucos.
Algunos elementos de Webflow usan la cuadrícula de forma natural, otros... no tanto. Especialmente los contenedores flex. Veamos cómo puedes modificar tus contenedores flex para forzar la compatibilidad con la cuadrícula.
Webflow utiliza una cuadrícula de 12 columnas muy común y práctica. No puedes personalizarla (¡todavía!), pero una cuadrícula de 12 columnas resulta bastante flexible, ya que puedes dividirla entre 2 o 3.
Muchos diseñadores te dirán que uses un número impar de columnas para tus cuadrículas, y eso no es malo. Un número impar de columnas puede impulsarte a hacer cosas que no has hecho antes y evitar que crees diseños demasiado simétricos.
Pero cada limitación a la que te enfrentas se traduce en una oportunidad; solo mira el haiku. Es una forma rígida que requiere un número específico de líneas (tres) y sílabas (por lo general, 17). Y, sin embargo, los poetas han estado escribiendo haikus durante miles de años, produciendo numerosos clásicos.
Así que hoy nos centraremos en hacer que los diseños basados en flexbox funcionen con la cuadrícula integrada de 12 columnas de Webflow. Pero primero, conozcamos esa cuadrícula, ¿te parece?
La cuadrícula de Webflow
Webflow cuenta con un sistema de cuadrícula nativo para cada uno de sus puntos de interrupción de dispositivo:
- Escritorio: 12 columnas, 940px
- Tableta: 12 columnas, 724px
- Smartphone (vertical y horizontal): 2 columnas, ancho variable
Puedes activar y desactivar la cuadrícula, y elegir entre superposiciones claras o "rellenas", en la parte inferior izquierda del Diseñador.
Poco después de empezar a usar Webflow, te das cuenta de lo importante que es el elemento Contenedor. Al igual que la cuadrícula nativa, tiene 940 px de ancho en escritorio y siempre está centrado con respecto al navegador. Siempre está en la cuadrícula. En cada punto de interrupción.
Así que, para crear un diseño básico en Webflow, añade una barra de navegación, luego una sección (que ocupa todo el ancho del navegador) y, después, un contenedor anidado dentro de la sección. Y repite.
De esa forma, cuando empieces a añadir elementos a un contenedor, comenzarán al principio de la cuadrícula. Cada columna tiene 60 px de ancho, con un margen de 10 px a cada lado. Por lo tanto, si les das a esos elementos tamaños como 60, 140, etc., siempre encajarán en la cuadrícula.
Diseñar con la cuadrícula
Usar cuadrículas requiere un poco de concentración. Tienes que lidiar con los márgenes, decidir dónde poner los márgenes externos, cómo usar el relleno, etc. A menudo, te preguntarás si debes alinear el contenedor o el contenido a la cuadrícula.
¿La respuesta? El contenido. Siempre que puedas, alinea tu contenido (ya sea texto, imágenes o vídeos) a la cuadrícula.
De esa manera, si tu contenido está envuelto en cajas (divs), alinearás las cajas con los márgenes y luego añadirás relleno al contenido para que encaje en las columnas.
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.
El elemento de columna y la cuadrícula de Webflow
¿Alguna vez has notado cómo diseñar con el elemento contenedor y DIVs difiere de diseñar con el elemento de columna y DIVs? Eso es porque el elemento de columna tiene en cuenta la cuadrícula de forma predeterminada.
Para ver cómo, soltemos un elemento de columna en nuestro contenedor:
¿Ves cómo comienza en medio del margen, 10 px antes que el contenedor de arriba? La cuestión es que colocamos esta columna dentro de un contenedor y, sin embargo, comienza fuera de él. ¡¿Cómo funciona eso?! Para verlo, vamos a darle una clase a la fila y comprobar sus propiedades predeterminadas.
¿Lo viste? Las filas dentro de un elemento de columna tienen márgenes de -10 px a la izquierda y a la derecha de forma predeterminada. ¿Y las columnas?
Las columnas vienen con un relleno de 10 px a la izquierda y a la derecha. Así que ahí lo tenemos: nuestro contenedor envuelve los márgenes y nuestro contenido comienza exactamente en la cuadrícula.
Flexbox y la cuadrícula de Webflow
El elemento de columnas es potente gracias al control de diseño que ofrece; además, tienes opciones para definir cómo se comportará en diferentes puntos de interrupción.
Seguramente habrás oído que flexbox nos da otra forma de manejar columnas y, como es CSS puro, es aún mejor para el diseño adaptativo. Y si quieres que esa tercera columna de tu diseño de tres columnas aparezca primero en móviles, solo tienes que invertir el orden y ¡listo! Increíble.
Pero los contenedores flexbox no están bien equipados para lidiar con la cuadrícula de forma predeterminada.
No tienen en cuenta la cuadrícula ni los espacios entre columnas. Siempre empiezan justo donde los colocas, igual que un DIV estándar. Así que no puedes simplemente arrastrar un contenedor, establecerlo en display: flex y empezar a anidar divs como si fueran columnas. Especialmente si quieres que las columnas tengan una representación visual, como un fondo de color o un borde visible.
(Ah, y olvídate de usar contenedores con display: flex, porque no puedes alterar sus márgenes, ni siquiera añadiendo una clase. Usa DIVs).
Aquí tienes un div flex dentro de un contenedor.
Vamos a poner dos divs de 160px de ancho dentro como si fueran columnas.
No termina de funcionar. Mi primer div debería ser 10px más estrecho y, además, no podré darle estilo a su fondo como al siguiente. Esto no pasaba cuando usábamos un elemento de columna.
Así que hagamos con el elemento flex lo que Webflow hace con las columnas: sacarlo de la cuadrícula con un margen de -10px a la izquierda y a la derecha.
¡Ahí lo tienes! Ahora tenemos un contenedor flex con divs que actúan como columnas en su interior. Una clase única para esos DIVs y siempre estarán en la cuadrícula. Ya podemos usarlos como columnas.
Conclusión
¿Por qué es importante tener una clase única? Por mantenimiento, simplicidad y, lo más importante, para trabajar con el CMS. Cuando tratas con elementos en una lista dinámica, no tienes el lujo de añadir clases especiales al primer y último elemento para ajustarlos a la cuadrícula. Quieres una solución que funcione siempre, en todos los casos.
La cuadrícula importa. Y Webflow nos da todas las herramientas necesarias para manejarla. Empieza activando la superposición de la cuadrícula y déjala puesta todo el tiempo. Si no lo haces, terminarás dando a los elementos valores de espaciado que no siguen ninguna lógica subyacente.
Abre tus proyectos anteriores, activa la superposición de la cuadrícula y mira cómo puedes mejorar su diseño. Todo debería estar alineado a la cuadrícula, desde bloques de texto largos hasta botones pequeños. Al usar la cuadrícula, te permitirás dejar grandes partes del diseño sin usar, para que respiren. Los espacios de aire solo funcionan cuando encajan en la cuadrícula.
Y al trabajar con la cuadrícula, tienes una razón para poner las cosas donde están. De esa forma, es mucho más fácil responder a las preguntas de tu cliente y defender tus decisiones de diseño.
Regístrate para obtener una cuenta gratuita de Webflow y empieza a diseñar hoy mismo.
