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.
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:
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:
<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:
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?
Acabo de comenzar la Escuela de JS. Todos los aportes son valorados, ya que estoy de 0 por completo.
Gracias por el aporte
x2
Vamos que se puede!
¿Cómo te fue con la escuela?
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
Bueno, no me quedó muy claro cómo el contenido quedó orientado a la derecha.
Te lo tengo: Resulta que el “grid-template” es una matriz, y se escribe como tal.
grid-template-areas:
“a a .”
“a a .”
". b c";
Donde los puntos representan un espacio vacío en la matriz de 3x3, en este caso.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
estupenda información saludos a la comunidad de platzi
El adjetivo alado se usa para aquellas cosas que tienen alas como un pájaro o un sombrero. Lo que se quiso decir es al lado de algo.
Empeze la carrera de Desarrollador Full Stack en JavaScript y jamás había entendido cual era la función de los dos. Gracias, no me arrepiento de comprar los cursos.
Exelente contenido, me ayuda muchísimo ya que estoy empezando desde cero 😄
¿Por qué éstos dos tienen punto adelante: “. menu”
". content" y los demás no?
Solo eso, me quedó duda
Una lectura que deja claro las características de cada uno y que se pueden fusionar.
😄
Buen dato para entenderlo mejor, gracias!
hay mucho que aprender de este mundo, paso a paso hasta ahora empezando con los primeros cursos de java
Muchas gracias por la recomendacion
buena informacion!
Gracias por el aporte c:
Gracias @fannytaviles! aunque todavía me falta por comprender mejor las diferencias entre flexbox y grid esta explicación me lo deja un poco más claro
La vida se vuelve color de rosas cuando sabes cómo usar los dos como complementos. Excelente guia como complemento de los cursos. 💪🏽
¿como puedo poner el blog en modo favorito o algo parecido?
Curiosamente entre más indago en el mundo frontend más parece el hoyo del conejo, hay cada vez más y más cosas.
Aunque todavía me siento algo abrumado es una increíble oportunidad para aprender.
Que gran explicación de la diferencia entre estos dos tipos de displays. Gracias.
que buen aporte, muchas gracicas
Excelente, me sirve tambien para entender componentes y layouts completos.
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.
Buen aporte muchas gracias
Vamos a tomar el curso de grid!!!
Gracias, por la información. Resulve dudas que tenía.
Muchas gracias, ya me quedo mas claro
Woow!! Buenisimo ejemplo!
Brutal!
Excelente post, me despejo mis dudas, ahora tomare ese curso religiosamente, gracias
acabo de terminar el curso de CSS Grid y lo implementare en proyectos por su facilidad para generar la estructura de mi página
muy buen articulo, muy clara la información. gracias…
Tremendamente perfecto
gracias
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.
simple y claro! gracias Fanny!
Gran aporte, lo tomaré al finalizar este curso ❤️
Excelente! Gracias por compartir este articulo!
Dos herramientas bastante valiosas a la hora de diseñar, en conjuntos nos van a ayudar a optimizar nuestros diseños considerablemente.
Brutal🤯
Excelente información.