La mejor batalla de CSS: Grid vs Flexbox

Aprenda cómo difieren y cuándo debe usar uno sobre el otro.

CSS Flexbox se ha vuelto extremadamente popular entre los desarrolladores de front-end en los últimos años. Esto no es sorprendente, ya que nos ha facilitado mucho crear diseños dinámicos y alinear el contenido dentro de los contenedores.

Sin embargo, hay un niño nuevo en la ciudad llamado CSS Grid, y tiene muchas de las mismas capacidades que Flexbox. En algunos casos, es mejor que Flexbox, mientras que en otros casos no lo es.

Esto parece ser una fuente de confusión para los desarrolladores. Entonces en este artículo compara los dos módulos, tanto a nivel micro como macro.

Si desea aprender los dos módulos correctamente, consulte mis cursos gratuitos CSS Grid y CSS Flexbox .

¡Ahora comencemos!

Una dimensión frente a dos dimensiones

Si va a tomar una lección de este artículo, que sea esta:

Flexbox está hecho para diseños unidimensionales y Grid está hecho para diseños bidimensionales.

Esto significa que si está diseñando elementos en una dirección (por ejemplo, tres botones dentro de un encabezado), entonces debe usar Flexbox:

Te dará más flexibilidad que CSS Grid. También será más fácil de mantener y requerirá menos código.

Sin embargo, si vas a crear un diseño completo en dos dimensiones, con filas y columnas, entonces debes usar CSS Grid:

En este caso, CSS Grid le dará más flexibilidad, simplificará su marcado y el código será más fácil de mantener.

Ahora puedes combinar los dos. En el ejemplo anterior, sería perfecto usar Grid para el diseño de página y luego Flexbox para alinear el contenido dentro del encabezado. Esto te dará lo mejor de ambos mundos. Y te mostraré exactamente cómo hacerlo al final de este artículo.

Contenido primero frente a diseño primero

Otra diferencia principal entre los dos es que Flexbox toma como base el contenido mientras que Grid toma una base en el diseño . Esto puede parecer abstracto, así que veamos un ejemplo específico, ya que eso hace que sea más fácil de entender.

Usaremos el encabezado del párrafo anterior. Aquí está el HTML para ello:

<encabezado> 
    <div> Inicio </ div> 
    <div> Buscar </ div> 
    <div> Cerrar sesión </ div> 
</ header>

Antes de que lo convirtiéramos en un diseño de Flexbox, estos div se habrían apilado uno encima del otro de esta manera:

Agregué un poco de estilo básico, que no tiene nada que ver con Flexbox o Grid, así que lo dejo.

Encabezado de Flexbox

Sin embargo, cuando le damos una, display: flex;los elementos se colocarán muy bien en una línea.

encabezado { 
    display: flex; 
}

Para mover el botón de cierre de sesión al extremo derecho, simplemente direccionaremos ese elemento y le daremos un margen:

encabezado> div: nth-child (3) { 
    margin-left: auto; 
}

Lo que resulta en lo siguiente:

Lo que quiero que observen aquí es que dejamos que los elementos mismos decidan cómo se colocan. No tuvimos que predefinir nada más que display: flex;inicialmente.

Esta es la base de la diferencia entre Flexbox y Grid, y será más evidente a medida que recreemos este encabezado usando Grid.

Aunque CSS Grid no está diseñado para crear encabezados unidimensionales, sigue siendo un buen ejercicio hacerlo en este artículo, ya que nos enseña acerca de las diferencias principales entre Flexbox y Grid.

Encabezado de la grilla

Podemos crear nuestro encabezado de varias maneras diferentes usando CSS Grid. Voy a ir con una muy simple, donde nuestra grilla tiene diez columnas, cada una de una fracción de ancho.

header { 
    display: grid; 
    grid-template-columns: repeat (10, 1fr); 
}

Se verá idéntico a la solución Flexbox.

Sin embargo, podemos alcanzar el máximo para ver qué es diferente. Usaremos el inspector de Chrome para inspeccionar las líneas de columna:

La diferencia clave con este enfoque es que tuvimos que definir las columnas, el diseño, primero. Comenzamos definiendo el ancho de las columnas y luego colocamos el contenido en las celdas de la grilla disponibles.

Este enfoque nos obligó a tomar una postura sobre la cantidad de columnas en las que queríamos dividir nuestro encabezado.

A menos que cambiemos la cuadrícula, estamos atrapados con diez columnas. Una limitación con la que no tendríamos que lidiar en Flexbox.

Para cambiar el cierre de sesión al extremo derecho, lo colocaremos en la décima columna, así:

encabezado> div: nth-child (3) { 
    grid-column: 10; 
}

Así es como se ve cuando estamos inspeccionando la red:

No podríamos haberlo dado simplemente margin-left: auto;porque el botón de cerrar sesión ya se había colocado en una celda específica en el diseño, en la tercera columna. Para moverlo, tuvimos que encontrar otra celda de cuadrícula para ello.

Combinando los dos

Ahora veamos cómo usar ambos en combinación, combinando nuestro encabezado en el diseño de nuestro sitio web. Comenzaremos por construir el diseño del sitio web.

Aquí está el marcado:

<div class = "container"> 
  <header> HEADER </ header> 
  <aside> MENÚ </ aside> 
  <main> CONTENIDO </ main> 
  <footer> FOOTER </ footer> 
</ div>

Aquí está el CSS:

.container { 
    display: grid;    
    grid-template-columns: repeat (12, 1fr); 
    grid-template-rows: 50px 350px 50px; 
}

Colocaremos los artículos en la cuadrícula así:

header { 
    grid-column: span 12; 
}
a un lado { 
    grid-column: span 2; 
}
main { 
    grid-column: span 10; 
}
pie de página { 
    grid-column: span 12; 
}

Ahora simplemente agregaremos el encabezado. Vamos a convertir el encabezado, que es un elemento en nuestra cuadrícula CSS, en un contenedor de Flexbox.

encabezado { 
    display: flex; 
}

Ahora podemos establecer el botón de cerrar sesión a la derecha:

encabezado> div: nth-child (3) { 
    margin-left: auto; 
}

Y ahí tenemos un diseño perfectamente fino que utiliza lo mejor de Grid y Flexbox. Así es como se ven los dos contenedores:

Por lo tanto, ahora debe tener una sólida comprensión de las diferencias generales y específicas entre Flexbox y Grid, y saber cómo usarlas juntas.

Soporte del navegador

Antes de que termine, también necesito mencionar el soporte del navegador. En el momento de escribir este artículo, el 77% del tráfico global del sitio web soporta CSS Grid , y está subiendo.

Creo que 2018 será el año de CSS Grid. Conseguirá su avance, y se convertirá en una habilidad imprescindible para los desarrolladores de aplicaciones para el usuario. Muy parecido a lo que sucedió con CSS Flexbox en los últimos años.

Si desea aprender CSS Grid correctamente, simplemente deje su correo electrónico aquí y le daré acceso anticipado a mi curso gratuito cuando esté listo.

Haga clic en la imagen a continuación para ver una vista previa del curso.

¡Gracias por leer! Si tiene algún comentario o pregunta, deje un comentario a continuación.

4 comments
  1. Alyssa
    Alyssa
    mayo 28, 2018 at 10:19 am

    Gracias Dani,que bueno que te han gustado.

    Reply
  2. Buyviagra
    Buyviagra
    mayo 30, 2018 at 9:48 pm

    Escuela_digital, thanks for the article post.Really thank you! Great.

    Reply
  3. Santos
    Santos
    octubre 4, 2018 at 12:50 pm

    Muy buenos post….
    Gracias!!!!

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

Ir a la barra de herramientas