¿cuál Es la Diferencia Entre Flexbox y Grid?

by Silvia Mazzetta Date: 10-01-2020 flexbox grid webdesign layout css


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?

 
by Silvia Mazzetta Date: 10-01-2020 flexbox grid webdesign layout css visitas : 2610  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 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. 

 
 
 

Artículos relacionados

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

Principios Gestalt: Secretos de la piratería del cerebro humano por diseño

Cuando has vistola foto de arriba, ¿qué te ha venido a la mente? ¿Caras de mujeres o un candelabro? Sí, tal vez pueda adivinar tu respuesta. Porque el estudio dice…

4 cosas que no sabías sobre Grid CSS

Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs,…

Que son y Como funcionan las medidas VH y VW de CSS3

  Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Hoy vamos a conocer…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración