Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes:$249
$149
Currency
Antes:$249
Ahorras:$100
COMIENZA AHORA
156

Flexbox vs CSS Grid: ¿Cuál es la diferencia?

15933Puntos

hace 4 años

Curso de CSS Grid Layout 2017
Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.

Con el lanzamiento de CSS Grid he venido escuchado mucho la pregunta si este nuevo sistema de layouts reemplaza Flexbox. Desde mi punto de vista no lo hace del todo. Con CSS Grid puedes hacer cosas que con Flexbox no y viceversa. Lo ideal sería usarlos en conjunto. Puedes tener un contenedor con propiedad de grid y que sus hijos tengan propiedad flex y a la inversa también. Por ejemplo, si únicamente necesitas que un contenedor esté alado de otro, por simplicidad yo usaría flexbox en lugar de grid. Por otro lado, si tu layout está compuesto por filas y columnas que van cambiando en sus versiones responsive entonces CSS Grid te facilitará el trabajo.

Si aún no conoces CSS Grid en Platzi acabamos de lanzar un curso que te ayudará a conocer las bases del sistema de grillas para que puedas comenzar a utilizarlo en tus proyectos. Tiene buen soporte en Chrome, Firefox y Safari.

Soporte de CSS Grid

Pero entonces, ¿realmente CSS Grid sustituye a Flexbox? Cuando conocí CSS Grid hubo varias características que amé por la facilidad con la que ahora se podía lograr crear un Layout que anteriormente se consideraba complicado. Hacer un layout completo es mucho más fácil con CSS Grid que con Flexbox. Por otro lado, con CSS Grid podemos construir nuestra propia grilla indicando el número de columnas y filas que queremos que la conformen, así como el espacio entre cada una de ellas, todo lo necesario para configurar una grilla propia sin dolor.

La principal diferencia entre CSS Grid y Flexbox es que con Grid puedes ubicar elementos en dos dimensiones, columnas y filas al tiempo, mientras que con Flexbox solo puedes manejar una dimensión, tienes que elegir entre filas y columnas. Por ejemplo, digamos que queremos construir la siguiente UI:

Ejemplo del uso de Flexbox

Este es el caso perfecto en el que preferiría usar flexbox ya que los elementos están situados únicamente en dirección horizontal, uno alado de otro, algo que con flexbox es fácil de lograr.

<divclass="container">
  <divclass="item is-active">All</div>
  <divclass="item">Maps</div>
  <divclass="item">Images</div>
  <divclass="item">Videos</div>
</div>
.container {
  display: flex;
}

.item {
  padding: 0.5rem0.5rem;
}

.is-active {
  color: blue;
  border-bottom: 5px solid blue;
}

Por otro lado, si lo que quieres es construir un layout más completo compuesto por filas y columnas con elementos en distintas posiciones, podemos combinar flexbox con grid para lograrlo. Por ejemplo:

Ejemplo CSS Grid
<divclass="layout">
  <divclass="image">Imagen</div>
  <divclass="searcher">Buscador</div>
  <divclass="container">
    <divclass="item is-active">All</div>
    <divclass="item">Maps</div>
    <divclass="item">Images</div>
    <divclass="item">Videos</div>
  </div>
  <divclass="content">Contenido</div>
</div>
.layout {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-rows: 50px40px200px;
  grid-template-columns: 150px auto;
  grid-template-areas: 
    "image searcher"". menu"". content";
}

.layout > div {
  border: 1px solid red;
}

.image {
  grid-area: image;
}

.searcher {
  grid-area: searcher;
}

.content {
  grid-area: content;
}

.container {
  display: flex;
  grid-area: menu;
}

.item {
  padding: 0.5rem0.5rem;
}

.is-active {
  color: blue;
  border-bottom: 5px solid blue;
}

Resultado:
Resultado

Espero que esto les ayude a distinguir cuáles son las diferencias entre un valor y otro y lo más importante, CSS Grid y Flexbox son amigos, no enemigos. Y tu, ¿ya empezaste a usar CSS Grid en tus proyectos?

Curso de CSS Grid Layout 2017
Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.
Fannytaviles
Fannytaviles
fannytaviles

15933Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
13603Puntos

Justo empecé la Ruta de aprendizaje en Arquitectura Frontend y es el 3er curso que recomiendan de inicio. Por ahora me ha gustado la explicación de Leonidas. Ya estaré compartiendo lo aprendido. Saludos a la Comunidad Platzi

2
16574Puntos

Excelente post. Aún no he integrado css grid en las maquetas que implemento en mi trabajo. Sería estupendo comenzar a mezclar ambos; Tanto css grid como flexbox, juntos son prácticamente imparables ante cualquier propuesta de diseño.

2
8525Puntos

Buen post. La verdad es que CSS grid te ayuda mucho para maquetar. Ahora a combinar grid con flexbox y postcss 😃

2
5870Puntos

Acabo de comenzar la Escuela de JS. Todos los aportes son valorados, ya que estoy de 0 por completo.

Gracias por el aporte

2

Super Tu post, me encanto, uno como estudiante de platzi puede crear sus propios post?

1
138951Puntos
2 años

Puedes enviar tu idea a [email protected] para que lo revisen y comprueben si se puede publicar en el blog. 😉

1
4688Puntos

Brutal!

1
8184Puntos

Excelente post, me despejo mis dudas, ahora tomare ese curso religiosamente, gracias

1
28909Puntos

acabo de terminar el curso de CSS Grid y lo implementare en proyectos por su facilidad para generar la estructura de mi página

1

muy buen articulo, muy clara la información. gracias…

1
15993Puntos

Tremendamente perfecto

1
15557Puntos

Genial, todo depende del objetivo del layout y la arquitectura de la información, para así aplicar el correspondiente con sus propiedades. PD. Son amigos.

1
8949Puntos

simple y claro! gracias Fanny!

1
5334Puntos

Gran aporte, lo tomaré al finalizar este curso ❤️

1
7722Puntos

Excelente! Gracias por compartir este articulo!

1
6819Puntos

Que gran explicación de la diferencia entre estos dos tipos de displays. Gracias.

1
8722Puntos

Buenisimo!!!

Gracias por las recomendaciones de los cursos 😄

1
2854Puntos

Buen post, y si definitivamente, hay que saber ambos y utilizarlos en conjunto en los layouts más complejos que, como casi siempre, son los más comunes.

1
8623Puntos
3 años

Buen aporte muchas gracias

1
20971Puntos

Muchas gracias, ya me quedo mas claro

1
37918Puntos

Excelente, me sirve tambien para entender componentes y layouts completos.

0
215Puntos

No conocia ni flex ni grid pero con este post me he puesto al día, muchas gracias

0

Dos herramientas bastante valiosas a la hora de diseñar, en conjuntos nos van a ayudar a optimizar nuestros diseños considerablemente.