CSS Grid vs Flexbox: cuándo usar cada uno

Si llevas un tiempo escribiendo CSS, seguramente ya te has encontrado con estas dos herramientas: Flexbox y Grid. Ambas sirven para crear layouts y distribuir elementos en la pantalla, pero tienen filosofías distintas y brillan en situaciones diferentes.

El error más común es tratar de memorizar cuál es "mejor". La respuesta honesta es que depende del problema que estás resolviendo. En este artículo vas a entender cómo funciona cada uno, en qué se diferencian y cómo decidir cuál usar en cada situación, con ejemplos concretos.

Un poco de contexto: antes de Flexbox y Grid

Durante años, los desarrolladores construyeron layouts con trucos creativos: floats, tablas HTML usadas como estructura, posicionamiento absoluto y una interminable lista de hacks. Ninguno de esos métodos fue diseñado realmente para crear layouts de página, y todos tenían problemas serios de mantenimiento y compatibilidad.

Flexbox llegó alrededor de 2012 y resolvió el problema de distribuir elementos en una dimensión: una fila o una columna. CSS Grid llegó en 2017 y fue el primer sistema de layout bidimensional nativo de CSS: filas y columnas al mismo tiempo.

Hoy ambos tienen soporte completo en todos los navegadores modernos y son las herramientas estándar para construir interfaces.

Qué es Flexbox y cómo piensa

Flexbox, cuyo nombre completo es Flexible Box Layout, está diseñado para distribuir elementos a lo largo de un único eje: horizontal o vertical. Piensa en él como una cinta transportadora: los elementos se alinean uno tras otro en una dirección, y tú controlas cómo se distribuye el espacio entre ellos.

Se activa con una sola línea en el elemento contenedor:

.contenedor {
  display: flex;
}

A partir de ese momento, todos los hijos directos del contenedor se convierten en flex items y pueden ser controlados con propiedades como:

• flex-direction: define si el eje principal es horizontal (row) o vertical (column).
• justify-content: controla la alineación en el eje principal (horizontal por defecto).
• align-items: controla la alineación en el eje secundario (vertical por defecto).
• gap: define el espacio entre elementos.
• flex-wrap: permite que los elementos salten a la siguiente línea si no caben.
• flex-grow y flex-shrink: controlan cómo los elementos crecen o se encogen para ocupar el espacio disponible.

.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Qué es CSS Grid y cómo piensa

CSS Grid fue diseñado para trabajar en dos dimensiones al mismo tiempo: filas y columnas. Piensa en él como una cuadrícula o tabla donde tú defines la estructura completa del layout y luego ubicas los elementos dentro de ella.

Se activa igual que Flexbox:

.contenedor {
  display: grid;
}

Pero su potencia aparece cuando defines las columnas y filas:

.contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 24px;
}

La unidad fr (fracción) es exclusiva de Grid y representa una fracción del espacio disponible. 1fr 1fr 1fr crea tres columnas de igual ancho que se reparten todo el espacio disponible.

Las propiedades más importantes de Grid son:

• grid-template-columns: define el número y tamaño de las columnas.
• grid-template-rows: define el número y tamaño de las filas.
• grid-template-areas: permite nombrar zonas del layout con palabras descriptivas.
• gap: espacio entre filas y columnas.
• grid-column y grid-row: indican qué espacio ocupa un elemento dentro de la cuadrícula.
• repeat() y minmax(): funciones para crear columnas dinámicas y responsivas.

La diferencia fundamental: una dimensión vs dos

Esta es la distinción más importante y la que debe guiar tu decisión:

• Flexbox trabaja en una sola dimensión a la vez. Distribuye elementos en una fila o en una columna. Es excelente cuando el layout fluye en una dirección.
• Grid trabaja en dos dimensiones simultáneamente. Controla filas y columnas al mismo tiempo. Es ideal cuando necesitas que los elementos se alineen tanto horizontal como verticalmente.

Una forma sencilla de recordarlo: si puedes describir tu layout como "una fila de elementos" o "una columna de elementos", usa Flexbox. Si puedes describirlo como "una cuadrícula de elementos organizados en filas y columnas", usa Grid.

Cuándo usar Flexbox

Navegación y barras de menú

Los elementos de navegación son el caso de uso perfecto para Flexbox. Son una lista de ítems que deben distribuirse a lo largo de una fila, con control preciso del espacio entre ellos.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

Centrar un elemento vertical y horizontalmente

Centrar algo perfectamente en el espacio disponible, que durante años fue uno de los problemas más frustrantes de CSS, se resuelve con tres líneas de Flexbox:

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Grupos de botones o etiquetas

Cuando tienes un conjunto de botones, chips o etiquetas que deben fluir y, si no caben, saltar a la siguiente línea:

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Cards o elementos con contenido de altura variable

Dentro de una card, Flexbox es ideal para empujar el botón de acción hacia el fondo, sin importar cuánto contenido tenga el resto:

.card {
  display: flex;
  flex-direction: column;
}

.card-contenido {
  flex-grow: 1;
}

.card-boton {
  margin-top: auto;
}

Alinear un icono con texto

Uno de los usos más frecuentes y más simples: alinear un icono con el texto que lo acompaña:

.elemento-icono {
  display: flex;
  align-items: center;
  gap: 8px;
}

Cuándo usar CSS Grid

Layout general de una página

La estructura principal de una página (encabezado, barra lateral, contenido principal, pie de página) es el caso de uso más natural para Grid, gracias a grid-template-areas:

.pagina {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Galerías de imágenes

Una galería donde las imágenes deben alinearse tanto en filas como en columnas es imposible de construir bien con Flexbox, pero trivial con Grid:

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Imagen destacada que ocupa dos columnas y dos filas */
.imagen-destacada {
  grid-column: span 2;
  grid-row: span 2;
}

Grillas de tarjetas responsivas

Con repeat() y minmax(), puedes crear una cuadrícula de cards que se adapta automáticamente al tamaño de la pantalla sin necesidad de media queries:

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Este patrón es muy poderoso: cada columna tiene un mínimo de 280px y un máximo de 1fr. Cuando no caben más columnas de ese ancho, se pasa automáticamente a una columna menos. Todo sin una sola media query.

Formularios con alineación precisa

Los formularios donde los labels y los inputs deben alinearse perfectamente en dos columnas son un caso ideal para Grid:

.formulario {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
}

.formulario label {
  text-align: right;
}

/* Campo que ocupa toda la fila */
.campo-completo {
  grid-column: 1 / -1;
}

Dashboards y paneles de control

Los dashboards con widgets de distintos tamaños que deben encajar en una cuadrícula son prácticamente imposibles de mantener sin Grid:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.widget-grande {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-ancho {
  grid-column: span 3;
}

¿Se pueden combinar? Sí, y es lo más común

Flexbox y Grid no son excluyentes. En la mayoría de los proyectos reales se usan juntos, cada uno donde mejor encaja. La estructura general de la página puede estar hecha con Grid, y dentro de cada sección los componentes individuales pueden usar Flexbox.

/* Grid para el layout general */
.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
}

/* Flexbox dentro del header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Grid para la cuadrícula de cards */
.seccion-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 24px;
}

/* Flexbox dentro de cada card */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

Este patrón, Grid para la macro-estructura y Flexbox para los componentes internos, es el que usan la mayoría de los sistemas de diseño y frameworks de CSS modernos.

Tabla comparativa rápida

La regla práctica para decidir

Cuando enfrentes un problema de layout y no sepas cuál usar, hazte estas preguntas:

• ¿Los elementos deben alinearse en una sola dirección? Usa Flexbox.
• ¿Los elementos deben alinearse tanto en filas como en columnas al mismo tiempo? Usa Grid.
• ¿Estás diseñando la estructura general de la página? Probablemente Grid.
• ¿Estás diseñando un componente pequeño como un botón, una card o un ítem de menú? Probablemente Flexbox.
• ¿Necesitas que los elementos se adapten solos al espacio disponible sin media queries? Grid con auto-fill y minmax().

Errores comunes

Usar Flexbox para todo

Es el error más frecuente entre quienes aprenden Flexbox antes que Grid. Cuando lo único que conoces es Flexbox, intentas usarlo para layouts bidimensionales y terminas con estructuras anidadas innecesariamente complicadas. Si necesitas controlar filas y columnas al mismo tiempo, Grid es la herramienta correcta.

Usar Grid para alineaciones simples

El caso contrario también ocurre. Grid tiene una sintaxis más extensa y para centrar un botón o alinear un icono con texto, Flexbox es más simple, directo y legible.

No usar gap

Antes de que existiera gap en Flexbox (antes era exclusivo de Grid), los desarrolladores usaban margin para separar los elementos, lo que generaba márgenes no deseados en los bordes. Hoy gap funciona en ambos y es la forma correcta de manejar el espacio interno entre elementos.

/* ❌ Forma antigua y problemática */
.item {
  margin-right: 16px;
}
.item:last-child {
  margin-right: 0;
}

/* ✅ Forma correcta */
.contenedor {
  display: flex;
  gap: 16px;
}

Recursos para practicar

La mejor forma de dominar Flexbox y Grid es jugar con ellos de forma visual. Existen herramientas interactivas muy útiles para esto:

• Flexbox Froggy: un juego donde aprendes Flexbox moviendo ranas a sus nenúfares. Ideal para principiantes.
• Grid Garden: el mismo concepto pero para CSS Grid, con un jardín de zanahorias.
• CSS Tricks - A Complete Guide to Flexbox: la referencia más completa sobre todas las propiedades de Flexbox.
• CSS Tricks - A Complete Guide to Grid: la misma guía pero para Grid, con diagramas visuales de cada propiedad.

Conclusión

Flexbox y Grid no compiten entre sí: se complementan. Flexbox es tu herramienta para distribuir y alinear elementos en una dimensión, dentro de componentes y secciones. Grid es tu herramienta para definir estructuras en dos dimensiones, en el layout general de la página y en cuadrículas complejas.

Aprende los dos. Úsalos juntos. Con el tiempo, la decisión de cuál usar en cada situación se volverá intuitiva y llegarás a un punto donde combinarlos de forma natural es parte de cómo piensas el diseño de una interfaz.

Si estás comenzando con el desarrollo web, te recomendamos leer también nuestro artículo sobre la diferencia entre HTML, CSS y JavaScript y la guía sobre CSS Flexbox explicado fácil con ejemplos prácticos, donde puedes profundizar en las propiedades de Flexbox antes de dar el salto a Grid.