() translation by (you can also view the original English article)
Flexbox y CSS Grid son dos módulos de diseño CSS que se han convertido en la tendencia principal durante los últimos años. Ambos nos permiten crear diseños complejos que antes sólo eran posibles mediante la aplicación de trucos con CSS y/o JavaScript. Flexbox y CSS Grid comparten múltiples similitudes y se pueden resolver muchos diseños con ambos. Sin embargo, cuándo usarlos, es otra pregunta.
Resumen de la industria
El debate CSS Grid vs flexbox es actualmente el tema más candente en la comunidad CSS. Si sigues las noticias del sector, habrás visto surgir últimamente muchos geniales artículos, tales como:
- Rachel Andrew blogueó sobre esta cuestión ya en 2016 y más tarde continuó el debate en más detalle.
- El mes pasado, Chris Coyier inició un hilo viral en Twitter que concluyó con un más amplio artículo que incluía algunos ejemplos de genial código en CSS-Tricks.
- Michelle Barker también respondió al hilo de Twitter de Chris escribiendo otro excelente artículo sobre el tema Grid vs flexbox en su popular blog CSS {In real Life}.
- La comunidad MDN ha creado algunos exhaustivos documentos sobre las diferencias fundamentales entre Grid y flexbox, que son a día de hoy la mejor documentación disponible sobre el tema.
También puedes encontrar muchas otras entradas de blog, artículos, videos y debates en relación al tema en toda la web. Como es probable que el tema se mantenga relevante en el futuro, te recomendaría la lectura de algunos de los anteriores artículos y que desarrolles tu propia postura sobre la cuestión, ya que nada está todavía determinado de forma definitiva.
Aquí hay otra toma.
Una frente a dos dimensiones
Lo más importante es saber que flexbox es unidimensional, mientras que CSS Grid es bidimensional. Flexbox establece elementos a lo largo del eje horizontal o vertical, lo que te exige a decidir si deseas un diseño basado en filas o en columnas.
Un diseño flexible también puede ajustarse en varias filas o columnas y flexbox trata cada fila o columna como una entidad independiente, en función de su contenido y del espacio disponible.
Por otro lado, CSS Grid te permite trabajar a lo largo de dos ejes: horizontal y verticalmente. Grid te permite crear diseños bidimensionales en los que puede colocar elementos de cuadrícula con precisión en celdas definidas por las filas y columnas.
Así es como W3C quiere que usemos flexbox y Grid, sin embargo la práctica frecuentemente anula la teoría y no todo el mundo es fan de la narrativa unidimensional frente a la narrativa bidimensional. Por ejemplo, Chris Coyier hizo la siguiente declaración en su artículo antes mencionado:
"No soy el mayor fan del mundo de la diferenciación "1D" vs "2D" de Grid frente a flexbox, simplemente porque he descubierto que la mayor parte de mi uso diario de Grid es "1D" y es genial para eso. No quiero que alguien piense que tiene que usar flexbox y no Grid sólo porque esta última es únicamente útil cuando necesaria 2D. Aunque supone una gran diferencia que el diseño 2D sea posible con Grid, aunque en formas que no están disponibles en flexbox."
Y así es como funciona CSS en la vida real. De hecho, podemos crear diseños bidimensionales con flexbox (debido a su capacidad de envoltura) y también diseños unidimensionales con CSS Grid (debido a su capacidad de colocación automática).
Aunque flexbox en su origen no está concebido para la construcción de cuadrículas, con frecuencia se utiliza de esa manera. El mejor ejemplo es el sistema de cuadrícula de Bootstrap 4 que se basa en flexbox. Todos los sitios de Bootstrap 4 que hay por ahí hacen uso de flexbox para lograr diseños bidimensionales basados en filas y columnas. Y, hay otras populares herramientas como Flexbox Grid que hacen lo mismo.
Casos de aplicación
El concepto erróneo más común acerca de los dos módulos de diseño es que Grid sirve para diseños de página completa y flexbox para componentes más pequeños. Este no es el caso en absoluto. Todos los autores mencionados anteriormente nos advierten contra este enfoque, ya que esto puede limitar seriamente las posibilidades. Debes evaluar cada diseño de página individualmente, caso por caso, para elegir la mejor opción.
Enfoque en la colocación de contenido: CSS Grid
CSS Grid se centra en la colocación precisa del contenido. Cada elemento es una celda de la cuadrícula, alineada a lo largo de un eje horizontal y un eje vertical. Si deseas controlar con precisión la posición de los elementos dentro de un diseño, CSS Grid es el mejor camino a seguir. Los documentos W3 del módulo Grid afirman:
"Proporciona un mecanismo para que los autores dividan el espacio disponible para el diseño en columnas y filas mediante un conjunto de comportamientos de tamaño predecibles. A continuación, los autores pueden colocar y dimensionar con precisión los elementos del bloque de construcción de su aplicación en las áreas de cuadrícula definidas por las intersecciones de estas columnas y filas."
Con flexbox, es difícil predecir el comportamiento en ciertas ventanas gráficas y puedes obtener resultados sorprendentes. Por supuesto, puedes establecer los anchos y las alturas de los elementos flexibles o hacer uso de la función calc(), pero entonces pierdes el atractivo principal de flexbox: su flexibilidad.
Este no es el caso con CSS Grid. Tiene propiedades como grid-template-rows y grid-template-columns y utilidades como la unidad de fracción que te permiten calcularlo todo con precisión. Por lo tanto, Grid es especialmente adecuado para crear diseños inusuales como diseños rotos, asimétricos y superpuestos.
CSS Grid también permite crear diseños adaptables sin usar media queries. La idea viene de Heydon Pickering, quien recientemente publicó un video en YouTube sobre diseños algorítmicos. Presenta una sencilla técnica con Grid que hace que las celdas de la cuadrícula se ajusten y se adapten a cualquier tamaño de ventana gráfica:
1 |
.container { |
2 |
display: grid; |
3 |
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); |
4 |
grid-gap: 1rem; |
5 |
}
|
Aunque el diseño se ajusta en función del espacio disponible, todavía no es consciente del contenido como flexbox, ya que el contenido dentro de los elementos no se extiende de forma flexible:
Enfoque en el flujo de contenido: Flexbox
Flexbox se centra en el flujo de contenido en lugar de en su ubicación. Las anchuras (o alturas) de los elementos flexibles vienen determinadas por el contenido del propio elemento. Los elementos flexibles se amplían y se encogen de acuerdo con su contenido interno y con el espacio disponible. Así es como los documentos flexbox de W3C explican los objetivos del módulo de diseño:
"... (flexbox) se beneficia de herramientas simples y potentes para distribuir el espacio y alinear el contenido de maneras que las aplicaciones web y las páginas web complejas a menudo necesitan."
En resumen, flexbox te permite asignar espacio y alinear elementos de forma flexible. Veamos cómo se vería la cuadrícula de Heydon con flexbox. El siguiente código añade un margen de 0.5rem a cada elemento flex (como flexbox no tiene una propiedad gap, tenemos que usar el truco del margen negativo).
1 |
.container { |
2 |
display: flex; |
3 |
flex-wrap: wrap; |
4 |
margin: -0.5rem; |
5 |
}
|
6 |
.item { |
7 |
margin: 0.5rem; |
8 |
}
|
Como puedes ver a continuación, el primer elemento flexible con el contenido largo se extiende hasta donde sea necesario:
Por supuesto, puedes crear elementos flexibles de ancho fijo utilizando las propiedades width o flex-basis. Sin embargo, si lo haces pierdes la conciencia de contenido sustancial a flexbox, que es la razón principal de su existencia. También puedes ver arriba que flexbox trata cada fila de forma independiente. Diferentes filas alinean los elementos flexibles de manera diferente, en función de la cantidad de texto dentro de ellos. Aquí no existen columnas y esto no es una cuadrícula, sino un diseño unidimensional.
Flexbox también te permite decidir cómo debe comportarse tu contenido cuando hay demasiado, o no hay suficiente espacio en la pantalla. Escribí sobre el tema en detalle en mi artículo sobre el dimensionado de flexbox. Mediante las propiedades flex-grow y flex-shrink, puedes conseguir un diseño completamente fluido que optimice la distribución de elementos flexibles en cada tamaño de ventana gráfica.
También hay otros casos de uso típicos de flexbox, como el centrado de elementos, el ajuste del último o los últimos elementos de las listas, fijar el pie de página en la parte inferior de la página y crear menús responsivos. Puedes encontrar aún más ejemplos de uso de flexbox en los documentos de MDN.
Soporte del navegador
Flexbox tiene bastante buena compatibilidad con los navegadores, mientras que CSS Grid no es compatible con IE11 ni con Edge 15-.
Los artículos con frecuencia recomiendan usar flexbox como alternativa a CSS Grid, sin embargo muchos desarrolladores lo consideran demasiado complicado y prefieren crear sus diseños exclusivamente con flexbox.
Pero flexbox tampoco es perfecto. Tiene un par de problemas que se recopilan en el repositorio de Flexbugs en GitHub (con soluciones alternativas entre navegadores para los errores). Si te encuentras con un problema mientras trabajas con flexbox vale la pena echar un vistazo a esta lista, ya que podrías descubrir la solución a tu problema.
¡Prepárate para la batalla!
La cuestión flexbox vs. CSS Grid no tiene por que tener una respuesta tajante y depende de muchos factores distintos. No te apegues a uno u otro, en lugar de eso reflexiona siempre cuál sirve mejor a tus metas. También puedes combinar flexbox y CSS Grid para resolver diseños complejos como esta genial interfaz de usuario de tarjeta:
Para entender mejor tus opciones, consulta también nuestros tutoriales sobre flexbox y CSS Grid. Tenemos artículos sobre la alineación con flexbox, el orden y el tamaño, además de una serie de artículos sobre el módulo de diseño Grid CSS.
