CSS Grid vs Flexbox: guía visual con ejemplos interactivos

La pregunta "¿Grid o Flexbox?" está mal planteada casi siempre. No compites entre dos herramientas que hacen lo mismo, como pasaría al elegir entre Python y JavaScript para aprender a programar; compites entre dos herramientas que resuelven problemas distintos y que, en un proyecto real, casi siempre conviven en el mismo archivo CSS. La confusión viene de que ambas usan un vocabulario parecido (contenedor, elementos, alineación), pero el modelo mental detrás es diferente.

La diferencia de fondo: una dimensión vs dos

Flexbox está pensado para distribuir elementos en una dimensión: una fila o una columna. Es la herramienta natural para una barra de navegación, una lista de botones, o centrar un elemento dentro de otro. Grid está pensado para dos dimensiones a la vez: filas y columnas simultáneamente, lo que lo hace ideal para el layout general de una página o para una cuadrícula de tarjetas donde te importa tanto la alineación horizontal como la vertical.

Una forma práctica de decidir: si estás organizando el contenido de dentro de un componente (un grupo de botones, los elementos de una card), probablemente quieres Flexbox. Si estás organizando la estructura general de una sección o página (cabecera, contenido principal, barra lateral, pie), probablemente quieres Grid.

El mismo layout, resuelto con Grid y con Flexbox

Nada aclara más esto que ver el mismo resultado —una cuadrícula de tarjetas de producto que se ajusta al ancho disponible— resuelto de las dos formas:

.contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.tarjeta {
  /* Grid ya reparte el ancho: la tarjeta no necesita flex-basis ni width */
  padding: 1rem;
}

.contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.tarjeta {
  /* hay que decirle a cada tarjeta cuánto puede crecer/encogerse */
  flex: 1 1 220px;
  padding: 1rem;
}

Con Grid, repeat(auto-fill, minmax(220px, 1fr)) le dice al navegador "encaja tantas columnas de al menos 220px como quepan, y repártelas el espacio sobrante a partes iguales". Con Flexbox, el mismo efecto se consigue combinando flex-wrap: wrap con un flex-basis en cada tarjeta, pero el control fino de cuántas columnas caben por fila es menos directo: Flexbox no sabe de "columnas" como concepto, solo de elementos que se acomodan en una línea y saltan a la siguiente cuando no caben.

Cuándo Flexbox gana claramente

Para una barra de navegación con el logo a la izquierda y los enlaces a la derecha, Flexbox es más directo que Grid:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .enlaces {
  display: flex;
  gap: 1.5rem;
}

justify-content: space-between empuja el primer y el último elemento a los extremos, y align-items: center los centra verticalmente. Resolver esto mismo con Grid es posible, pero requiere definir columnas explícitas donde en realidad no piensas en columnas, sino en "elementos en fila".

Cuándo Grid gana claramente

Para el esqueleto de una página completa —cabecera arriba, barra lateral a un lado, contenido en medio, pie abajo— Grid modela la intención directamente, incluyendo huecos vacíos si hace falta:

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "cabecera cabecera"
    "sidebar  contenido"
    "pie      pie";
  min-height: 100vh;
}

.cabecera { grid-area: cabecera; }
.sidebar  { grid-area: sidebar; }
.contenido { grid-area: contenido; }
.pie      { grid-area: pie; }

grid-template-areas es, literalmente, un mapa visual del layout escrito en el propio CSS: se lee casi como un dibujo. No hay forma razonable de conseguir ese mismo control bidimensional con Flexbox sin anidar varios contenedores flex unos dentro de otros, lo que complica el código sin necesidad.

Tabla resumen

No elijas entre Grid y Flexbox como si fuera una decisión de por vida. En un proyecto real conviven: Grid para la estructura general, Flexbox para organizar el contenido dentro de cada pieza de esa estructura.

Se pueden combinar sin problema

De hecho, es habitual usar Grid para el layout general de una página y Flexbox dentro de cada celda de esa cuadrícula para alinear su contenido interno. Esta combinación es tan común en interfaces modernas que, si estás aprendiendo a construir tu primera app con React, verás rápidamente que casi cualquier componente de UI mezcla ambos: un Grid para la disposición general de las tarjetas y un Flex interno en cada tarjeta para alinear icono, título y descripción.

Errores comunes al elegir entre los dos

Casi todos los líos con Grid y Flexbox vienen de aplicar el que ya conoces mejor en vez del que encaja con el problema. Estos son los que más se repiten:

• Usar Flexbox para un layout de página completo: funciona a base de flex-wrap y márgenes calculados a mano, pero en cuanto el diseño tiene más de una fila con columnas alineadas entre sí, Grid lo resuelve con una fracción del código.
• Usar Grid para alinear un solo grupo de elementos en fila: para centrar un icono junto a un texto, o repartir tres botones en una barra, definir un grid de una fila es más trabajo del necesario — ahí Flexbox con justify-content es instantáneo.
• No usar gap: tanto Grid como Flexbox moderno soportan gap para separar elementos sin recurrir a márgenes que hay que compensar en los bordes. Si todavía usas margin-right con un :last-child para quitarlo, puedes borrar esas líneas.
• Anidar Grid dentro de Grid cuando bastaría con Flexbox interno: como se explica en el punto anterior, la combinación habitual es Grid fuera y Flexbox dentro de cada celda — anidar Grid dentro de Grid casi siempre añade complejidad sin necesidad.

Prueba tú mismo la diferencia

La mejor forma de fijar estos conceptos es cambiar los valores en un proyecto real y ver qué pasa. Copia cualquiera de los dos bloques de código de arriba en un archivo HTML con un puñado de div dentro, y ve cambiando grid-template-columns o flex hasta que el comportamiento tenga sentido para ti. No hay atajo mejor que ver el layout romperse y arreglarlo con tus propias manos.