La última batalla de CSS: Grid vs Flexbox

Aprenda en qué se diferencian y cuándo debe usar uno sobre el otro.

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

Sin embargo, hay un chico 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 compare 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 .

Haga clic en una imagen para llegar a su curso respectivo.

¡Ahora comencemos!

Una dimensión frente a dos dimensiones

Si vas a sacar 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á distribuyendo 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 va a crear un diseño completo en dos dimensiones, con filas y columnas, entonces debe 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, por supuesto, puede combinar los dos. En el ejemplo anterior, sería perfecto usar Grid para el diseño de la 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 vs diseño primero

Otra diferencia central entre los dos es que Flexbox se basa en el contenido mientras que Grid se basa en el diseño . Esto puede parecer abstracto, así que veamos un ejemplo específico, ya que lo hace más fácil de entender.

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

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

Antes de convertirlo 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 fuera.

Encabezado de caja flexible

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

encabezado {pantalla: flex;}

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

encabezado > div:nth-child(3) {margen-izquierda: auto;}

Lo que resulta en lo siguiente:

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

Este es el núcleo de la diferencia entre Flexbox y Grid, y será más evidente a medida que recreamos este encabezado usando Grid.

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

Encabezado de cuadrícula

Podemos crear nuestro encabezado de varias maneras diferentes usando CSS Grid. Voy a optar por uno bastante sencillo, donde nuestra cuadrícula tiene diez columnas, cada una con una unidad de fracción de ancho.

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

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

Sin embargo, podemos mirar debajo del capó para ver qué es diferente. Usaremos el inspector de Chrome para inspeccionar las líneas de las columnas:

La diferencia clave con este enfoque es que primero teníamos que definir las columnas, el diseño. Comenzamos definiendo el ancho de las columnas y luego colocamos el contenido en las celdas de cuadrícula disponibles.

Este enfoque nos obligó a tomar una postura sobre en cuántas columnas queríamos dividir nuestro encabezado.

A menos que cambiemos la cuadrícula, nos quedaremos con diez columnas. Una limitación con la que no habríamos tenido 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 cuadrícula:

No podríamos simplemente haberle dado un margin-left: auto; porque el botón de cierre de 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 él.

Combinando los dos

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

Aquí está el marcado:

<div class="container"><header>HEADER</header><aside>MENU</aside><main>CONTENT</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 elementos en la cuadrícula de esta manera:

encabezado {cuadrícula-columna: intervalo 12;}

aparte {grid-column: span 2;}

principal {cuadrícula-columna: intervalo 10;}

pie de página {grid-column: span 12;}

Ahora simplemente agregaremos el encabezado. Convertiremos el encabezado, que es un elemento en nuestra cuadrícula CSS, en un contenedor Flexbox.

encabezado {pantalla: flex;}

Ahora podemos configurar el botón de cierre de sesión a la derecha:

encabezado > div:nth-child(3) {margen-izquierda: 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:

Así que ahora deberías tener una sólida comprensión de las diferencias generales y específicas entre Flexbox y Grid, y saber cómo usarlos juntos.

Compatibilidad con navegador

Antes de terminar, también debo mencionar la compatibilidad con el navegador. Al momento de escribir este artículo, el 77% del tráfico global de sitios web es compatible con CSS Grid , y está aumentando.

Creo que 2018 será el año de CSS Grid. Obtendrá su gran avance y se convertirá en una habilidad imprescindible para los desarrolladores front-end. Al igual que sucedió con CSS Flexbox en los últimos años.

Haga clic en la imagen de abajo para ver una vista previa del curso.

¡Gracias por leer! Mi nombre es Per, soy el cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.