Grid vs FlexBox (opinión)

Grid resulta una opción mucho mas sencilla y visual que flexbox, flexbox nos permite una alineación de elementos que va en una sola dirección Grid esta preparado para realizar un entramado de celdas con sus propias propiedades como si de una tabla extremadamente versátil se tratara.

Con Grid la creación de una estructura básica puede hacerse un muchas menos lineas de código CSS.

Grid permite que definamos nuestros espacios en filas y columnas adaptando cada celda con una flexibilidad casi absoluta, el elemento padre prepara el terreno a los hijos y estos pueden beneficiarse aplicando estilos, que según convenga los posicionarán ocupando dentro de la tabla ya definida las celdas que se especifiquen, sin necesidad de obligarnos a adaptar el maquetado a unas medidas y posiciones que con flex serían mucho mas complejas de adaptar a las medidas de nuestro diseño, sobre todo en elementos que cubren alturas y anchos que entran en conflicto con elementos superiores e inferiores, o con medidas de elementos hijos del “div” padre que necesitan medidas mucho mas especificas que flexbox nos complica a la hora de aplicarlas.

Como muestra esta imagen, CSS grid se aventaja a Flexbox al incorporar ambos ejes de coordenadas a su funcionalidad, lo cual lo hace mas versátil.

 

Lo mejor ahora será ejemplificar lo mencionado. Voy a tratar de representar una plantilla base de 5 elementos de dos formas: con flexbox la primera y grid la segunda. Después comentaré el código y los puntos en los que una opción prima sobre la otra.

CON FLEXBOX

See the Pen cssGrid vs Flexbox (Flexbox basic page structure) by Keruanima (@keruanima) on CodePen.

CON GRID

See the Pen cssGrid vs Flexbox (Grid basic page structure) by Keruanima (@keruanima) on CodePen.

Con flexbox a la hora de hacer el responsive debemos tener en cuenta mas clases en el media query pero con Grid nos limitamos al padre de los elementos, ya que usando su propiedad grid-area no solo colocamos los elemenos en el css de una manera mas visual, si no que lo podemos hacer en una sola clase facil de modificar.

Con Grid el diseño responsive se puede simplificar mas.

Entendiendo los conceptos de grid, los estilos con los que cuenta y sus propiedades se pueden realizar webs con una versatilidad, agilidad y economía que con flex es mas arduo conseguir. También existen “limitaciones” o situaciones que con flexbox se complican, por ejemplo si quisiéramos dar a el sidebar derecho un ancho mas pequeño en el ejemplo hecho con grid sería añadir una sola linea de código css pero en el ejemplo que usa flexbox esto se complicaría algo mas ya que los elementos están adaptándose al espacio total de una manera mucho mas forzosa.

 

En definitiva Grid es la nueva tendencia y si bien Flexbox sigue siendo muy útil, estoy seguro de que todo diseñador que se precie se adaptara a CSS grid por los beneficios que supone.

Hola, soy un diseñador multimedia con conocimientos polivalentes aplicables a los campos del diseño web, los videojuegos, el diseño gráfico y la animación, actualmente trabajo como diseñador web pero me gusta seguir tocando de vez en cuando las otras áreas. En esta web que uso como portfolio trato de plasmar todo aquello que sea relevante a mi perfil profesional. Me gusta lo que hago y trato de mantenerme al día tanto como puedo. Quiero usar mis post como una ventana al mundo a través de la cual pueda dar mi opinión en múltiples temas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *