¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas.

Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño web y son mucho más potentes que cualquier técnica que haya existido antes. Pueden estirar y encoger los objetos, pueden centrarlos, pueden reordenarlos, pueden alinearlos...

Hay muchas situaciones de maquetación en las que se pueden utilizar para solucionar rapidamente nuestros problemas, y muchas situaciones en las que una técnica es más adecuada que la otra. Centrémonos en las diferencias más que en las similitudes:

La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Es una propiedad opcional Flexbox.

La siguiente línea es independiente de la primera, lo que permite un aspecto similar a Mansory.

Grid también puede deslizar elementos opcionalmente (si permitimos el auto filling) en el sentido de que los elementos pueden llenar una línea y moverse a la nueva (o auto-colocarse). Pero al hacerlo, caerán a lo largo de las mismas líneas del grid.

Se puede pensar en flexbox como a un elemento "unidimensional".

Flexbox puede hacer filas y columnas en el sentido de que permite que los elementos fluyan y no hay manera de controlar donde teminarán ya que los mismos simplemente empujan a lo largo de un solo eje y luego se mueven en forma acorde al código.

De hecho los elementos se desplazan a lo largo de un plano unidimensional y es por esa única dimensión que podemos mover los elementos, como alinearlos a lo largo de una línea de base, que es algo que el Grid no puede hacer.

.parent {display: flex; flex-flow: row wrap; }

El Grid es "bidimensional" en el sentido de que podemos (si queremos) declarar el tamaño de las filas y columnas y luego colocar explícitamente las cosas en ambas filas y columnas como queramos.

.parent {    
display: grid;    
grid-template-columns: 1fr 3fr 1fr; 
grid-template-rows: 200px auto 100px; grid-template-areas:      
"header header header"      
". main sidebar"      
"footer . .";  
}    
.child-1 {    
grid-area: header;  
}    
.child-2 {    
grid-area: main;  
}    
.child-3 {    
grid-area: sidebar;  
}    
.child-4 {    
grid-area: footer;  
}

El Grid se define mayormente en el elemento padre. En el flexbox, la mayor parte del diseño (más allá de lo básico) se realiza en los hijos.

.flexbox {    
display: flex;    
> 
div {      
&:nth-child(1) {
flex: 0 0 100px;      
}      
&:nth-child(2) { 
flex: 1;        
max-width: 500px;      
}      
&:nth-child(3) { 
flex: 0 0 50px;       
margin-left: auto;      
}    
}  
}  
.grid {    
display: grid;    
grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;    
grid-template-rows: 100px repeat(3, auto) 100px;   
grid-gap: 10px;  
}

El Grid es mejor en la superposición de los elementos. 

Conseguir que los elementos se solapen en el flexbox requiere estudiar el css tradicional, como los márgenes negativos, las transformaciones o el posicionamiento absoluto para salir del comportamiento del flexbox. Con el Grid, podemos superponer los elementos en las líneas, o incluso dentro de las mismas celdas.

El Grid es más firme.

Mientras que la flexión de los elementos flexbox es a veces su fuerza, la forma en que se gestionan las dimensiones es bastante complicada. Es una combinación de anchura, anchura mínima, anchura máxima, base de flexión, crecimiento de flexión y contracción de flexión, sin mencionar el contenido interior y cosas como los espacios en blanco, así como los otros elementos de la misma fila.

El Grid tiene interesantes características para "ocupar los espacios", como las unidades fraccionarias, y la capacidad de que el contenido rompa las cuadrículas, aunque, en términos generales, estamos configurando líneas de cuadrícula y colocando elementos dentro de ellas que se despliegan en su lugar.

Flexbox puede "empujar" los elementos. Es una característica bastante única de flexbox que puede, por ejemplo, poner margin-right: auto;  a un elemento y, si hay espacio, ese elemento empujará todo lo demás tan lejos como pueda.

¿Mi opinión?

Para mí, el Grid sirve para un diseño completo que requiere más control sobre la organización de las páginas, mientras que flexbox ayuda a posicionar y alinear (ya sea en una cuadrícula o no) todos los elementos.

Al fin...es una cuestión de proyectos y objetivos.

¿Qué opináis?

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products.