> Faqs > CSS Flexbox vs CSS Grid Layout

CSS Flexbox vs CSS Grid Layout

Mi duda es saber cuándo usar Flexbox y cuando es mejor usar CSS Grid Layout.

Muchas gracias

Respuestas

Flexbox y CSS Grid System se pueden utilizar tranquilamente en muchos casos de manera indistinta. Creo que muchas veces la experiencia te dice cuál es más adecuado para uno u otro trabajo. Lo importante es conocerlos ambos y dominar sus características, porque entonces te darás cuenta de cuál te conviene utilizar, por la facilidad de aplicación de uno u otro esquema de trabajo para resolver un caso particular.

Una regla básica que se pueda aplicar y funciona bien es utilizar flexbox siempre que el trabajo sea sencillo. Grid se adapta más bien a problemas más complejos. Pero en realidad lo que te da la verdadera respuesta es que grid está pensado para hacer una rejilla.

Flexbox: En realidad te permite trabajar únicamente con filas y columnas. Es decir si tienes una distribución de elementos en la fila o una distribución de elementos en columna ( una única fila o una única columna), entonces es la especificación que se puede adaptar de manera sencilla.

Grid Layout: Está más pensado para crear rejillas, es decir, distribuciones de elementos en filas y columnas al mismo tiempo. Usarás grid cuando tengas elementos que quieres distribuir en más de una fila y más de una columna, en una cuadrícula, etc.

Sin embargo estas dos divisiones son un poco ambiguas porque, aunque flexbox esté pensado para una única fila o una única columna, nadie te quita de anidar elementos flexbox dentro de otros elementos flexbox para crear distribuciones complejas. Por ejemplo colocas todos los elementos en una columna y en una de las casillas de esa columna tienes otro elemento Flex en la cual utilizas distribución de filas. Así puedes llegar a conseguir efectos como los que tendrías en una rejilla con elementos Flex.

De todas formas CSS Grid tiene una particularidad que también es muy interesante que consiste en la unión de filas y/o columnas, consiguiendo que haya filas que ocupen más de una columna o columnas que ocupen más de una fila y combinaciones similares. Esa versatilidad solo lo consigues con CSS grid layout.

En fin, como decía al principio, muchas veces la experiencia y sobre todo saber las cosas que puedes hacer con uno u otro sistema son los criterios más importantes para poder llegar a la respuesta a tu pregunta y saber qué aplicar si CSS Grid o CSS Flexbox.

Alberto
580 14 40 18

No es que haya uno mejor o peor. Debes conocerlos a ambos, CSS Flexbox y CSS Grid Layout para usarlos indistintamente.

Si los conoces bien no suele haber dudas. Usa simplemente el que te resulte más fácil de aplicar y listo!

Victor
259 7 18 11