GRID
Como las últimas versiones de los navegadores ya ofrecen soporte para la propiedad Grid, sólo es necesario familiarizarse con su forma de trabajar de rejilla y aplicar el nuevo «display: grid» con el que comenzaremos a usar todas sus características para posicionar los elementos en la página:
- Ofrece un control total de las dos dimensiones.
- La ubicación de los ítems es libre; no es una tabla.
- Es posible colocar los ítem donde necesitemos, en cualquiera de las celdas que el Grid describe, incluso en celdas que no has descrito.
- Puede haber ítems que se coloquen solos gracias al su característica de auto-placement.
FLEXBOX
Además de agilizar las tareas, la propiedad Flexbox nos brinda la posibilidad de distribuir y posicionar los elementos dentro del espacio de trabajo, admitiendo muchos comportamientos diferentes, inaccesibles anteriormente con los otros CSS. Entre las novedades más importantes destacan:
- Alineación vertical. La ardua tarea de lograr que los elementos se alineen verticalmente se simplifica muchísimo con Flexbox.
- Conseguir que todos los ítems de un listado tengan la misma altura. Esto era algo complicado de lograr con CSS anterior, pero con Flexbox es pan comido, con independencia de su contenido, aun en los casos en que es contenido impredecible y variable. También destaca la facilidad de controlar la anchura de los elementos.
- Cambiar el orden de los elementos. Gracias a Flexbox, podemos ordenarlos de formas diferentes al visualizarse en la página, sin necesidad de cambiarlos en el HTML. De este modo, los desarrolladores y diseñadores frontend adquieren un mejor control sobre los elementos de la página, pudiendo especificar su ubicación y apariencia simplemente modificando los atributos CSS.
En qué destaca Grid respecto a Flexbox
- Para diseños 2D (filas y columnas).
- Grid es perfecto para construir una imagen más grande. Hace que sea realmente fácil de manejar el diseño de la página e incluso puede manejar diseños poco ortodoxos y asimétricos.
- Requiere menos intervención de consulta, lo que hace que sea realmente potente en funcionalidades del estilo auto layout: minmax(), repeat(), y auto-fill.
En qué destaca Flexbox respecto a Grid
- Flexbox es la mejor opción para alinear el contenido dentro de los elementos.
- Utiliza Flexbox para posicionar los detalles más pequeños de un diseño.
- Flexbox funciona mejor sólo en una dimensión (filas o columnas).
Contenido sacado de la página web: https://www.arsys.es/