Ya sea en el trazado de las calles de un barrio o en la maquetación de un periódico, las cuadrículas aportan orden y estructura. También permiten a los diseñadores agrupar elementos en el diseño de un sitio web. Tanto Flexbox como CSS grid son herramientas muy útiles para organizar contenido y gráficos, pero funcionan de formas muy distintas. Vamos a analizar qué hace que estos métodos de diseño sean diferentes, cómo puedes aplicarlos en tus propios proyectos web y cómo utilizarlos juntos.
Primeros pasos con flexbox
Antes de que existiera flexbox, vivíamos en la oscuridad. Los diseñadores se peleaban con los floats de CSS para intentar crear cuadrículas, sin ninguna garantía de que funcionaran en diferentes tamaños de pantalla. Entonces, de esa oscuridad surgió flexbox, un rayo de luz que permitió crear diseños dimensionales tipo cuadrícula y ayudó a impulsar la evolución del diseño responsivo.
Flexbox se creó para facilitar la alineación de contenido en diseños unidimensionales, ya sea vertical u horizontalmente. Los elementos en un diseño flexbox pueden ajustar su altura o anchura para adaptarse a distintos tamaños de pantalla.
Un diseño flexbox consta de dos elementos:
- El contenedor flex (o padre flex): Es el elemento de nivel superior o padre. Imagínalo como una caja grande que alberga un montón de cajas más pequeñas.
- Los elementos secundarios flex: Son el contenido del contenedor flex: las cajitas dentro de la caja grande.
Webflow facilita la configuración de estilos tanto para el contenedor flex como para los elementos secundarios. Echemos un vistazo a la interfaz de diseño flex:
Una vez que hayas creado un contenedor en Webflow y hayas insertado bloques div dentro, puedes establecer su propiedad de visualización en flexbox, lo que transformará esos bloques div en elementos secundarios flex. Los ajustes de diseño flex controlan cómo se muestran estos elementos. Tras seleccionar la orientación horizontal o vertical, puedes alinear y justificar los elementos secundarios para controlar cómo se distribuyen dentro del contenedor padre.
Alineación: Coloca los elementos en el eje transversal (es decir, la dirección opuesta a la que estableciste para el padre). Si el eje principal es horizontal, el eje transversal será vertical, y viceversa.
Justificación: Es la alineación del contenido en el eje principal (es decir, la dirección que estableciste para el padre).
Aquí, el contenedor flex está configurado en horizontal, con la alineación ajustada para estirarse verticalmente y la justificación configurada para empezar desde el origen del contenedor.
La forma más fácil de entender cómo funciona este estilo en Webflow es probar nuestro tutorial del juego Flexbox. Es muy útil completar el tutorial un par de veces para familiarizarse con el funcionamiento de estos controles. Vamos a ver un par de ejemplos y, ojo, te daremos algunas de las respuestas.
Bien, echemos un vistazo rápido a cómo podemos alinear elementos dispuestos verticalmente. Esto es del Nivel 8 del tutorial de flexbox.
Después de configurar el diseño flex en vertical, alineamos los elementos al final (el botón que parece una justificación a la derecha) y luego ajustamos el espaciado para que se distribuyan uniformemente. Esto coloca los círculos de colores totalmente a la derecha y los reparte de forma equitativa a lo largo del espacio vertical.
La naturaleza de flexbox está en su propio nombre: es flexible. Su fuerza reside en su elasticidad, estirándose o encogiéndose según el espacio disponible. Otra parte importante de esta adaptabilidad es la opción de ajustar (wrap) los elementos secundarios. Si no hay suficiente espacio para todos los elementos de un contenedor, flexbox puede mover algunos a la siguiente línea.
Aquí tienes otro ejemplo de nuestro tutorial que muestra cómo el ajuste de línea afecta a los elementos flex. Si no seleccionas esta opción, habrá demasiados elementos en una sola línea; al ajustar los elementos, les das más espacio y despejas tu diseño.
Flexbox funciona mejor para diseños sencillos o funciones pequeñas, como una barra de navegación superior. Si quieres crear una pantalla dividida, una barra lateral o una cabecera, flexbox ofrece una solución rápida. Aprende sobre otras aplicaciones de flexbox en nuestra Introducción a flexbox.
Para cuadrículas más avanzadas, donde necesitas control tanto en el eje vertical como en el horizontal, CSS grid te da el poder que buscas.
Aprende flexbox de la forma más divertida...
Domina los fundamentos de flexbox a través de 28 niveles cada vez más desafiantes —¡y divertidos!—, sin escribir ni una sola línea de código.
Fundamentos de CSS grid
CSS grid te permite controlar las columnas y filas de la cuadrícula, lo que te permite crear «píxeles» como esta cara sonriente retro.
CSS grid permite diseños más complejos que flexbox, porque organiza el contenido tanto en el eje horizontal como en el vertical: columnas y filas. Este emoji sonriente no sería posible con flexbox. Los píxeles, o bloques, tienen una posición fija en dos dimensiones. No hay ajuste de elementos como vemos en flexbox.
Los ajustes de diseño de CSS grid se parecen mucho a los de flexbox a primera vista. Te permiten cambiar la alineación, la distribución de los bloques y cómo se muestran.
CSS grid funciona mejor para diseños más complicados. Piensa en CSS grid como una forma de anclar varios elementos en una página. Grid es práctico para diseños que tienen varios bloques de contenido e imágenes que necesitas organizar. Flexbox no es tan útil para estos diseños más complejos, porque solo te permite controlar cómo se organizan los elementos en una sola dirección.
Por supuesto, CSS grid y flexbox pueden trabajar juntos en un diseño. Puedes usar flexbox dentro de CSS grid y viceversa.
Por ejemplo, podrías usar flexbox para centrar un elemento como un botón, tanto vertical como horizontalmente, dentro de una celda de cuadrícula específica (ya que centrar con otros métodos CSS es... complicado).
Y también podrías invertir este escenario, usando grid para controlar la colocación de datos dentro de tarjetas cuyo diseño está determinado, a un nivel superior, por flexbox. Esto puede ser muy útil para combinar la flexibilidad de flexbox con la precisión de grid para tarjetas que contienen una gran cantidad de datos, como podrías necesitar para listados inmobiliarios.
Puedes aprender mucho más sobre cómo usar flexbox y grid juntos en este vídeo:
Nota: aunque la interfaz de usuario ha cambiado para estos módulos de diseño, los conceptos subyacentes siguen siendo los mismos.
Para saber más sobre grid, echa un vistazo a nuestra página de CSS grid — ¡incluye 6 diseños de cuadrícula gratuitos y clonables para que puedas crear los tuyos!
CSS grid y flexbox: 2 formas diferentes de organizar el contenido
Flexbox y CSS grid pueden parecer complicados cuando empiezas como diseñador. Lo mejor es empezar a diseñar. Un poco de experimentación y algo de resolución de problemas te ayudarán a dominar ambos.
Y si te atascas, la comunidad de Webflow está aquí para ayudarte.
