CSS Grid vs Flexbox: cuándo usar cada uno de verdad

Si llevas un tiempo escribiendo CSS, seguramente habrás tenido esta duda: ¿pongo un display: flex o un display: grid? Y si eres honesto, probablemente la mayoría de las veces hayas tirado de Flexbox por costumbre.

No estás solo. Pero hay una forma mejor de tomar esa decisión, y no implica memorizar propiedades.

La pregunta que lo cambia todo

Antes de pensar en la propiedad CSS, hazte esta pregunta:

¿Estoy distribuyendo elementos en una dirección o en dos?

Una dirección (fila o columna): Flexbox.
Dos direcciones (filas y columnas a la vez): Grid.

Eso es el 80% de la decisión. El otro 20% son matices que veremos ahora.

Flexbox: el maestro de una dimensión

Flexbox nació para distribuir elementos a lo largo de un eje. Es perfecto cuando tienes un contenedor y quieres organizar sus hijos en fila o en columna, con control sobre el espaciado, el alineamiento y el orden.

Casos donde Flexbox brilla:

Barra de navegación con enlaces
Botones agrupados en una fila
Centrar un elemento vertical y horizontalmente
Tarjetas en una fila que se adaptan al espacio disponible

/* Barra de navegación clásica */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

La clave de Flexbox es que el contenedor manda. Tú le dices al padre cómo repartir a sus hijos, y los hijos se adaptan.

Grid: el maestro de dos dimensiones

Grid te permite definir filas y columnas al mismo tiempo. Es el sistema más potente para construir layouts completos porque puedes controlar exactamente dónde va cada elemento en ambos ejes.

Casos donde Grid brilla:

Layout completo de una página (header, sidebar, contenido, footer)
Galería de imágenes con filas y columnas
Cuadrícula de tarjetas con tamaños distintos
Cualquier cosa donde necesites que los elementos se alineen en dos ejes

/* Layout completo de página */
body {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

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

Con Grid no estás diciéndole a los hijos cómo comportarse entre ellos: estás definiendo una estructura y luego colocas los elementos dentro de ella.

La confusión más común

Muchos desarrolladores usan Flexbox para construir layouts de página completos porque lo conocen mejor. Funciona, pero se complica rápido: necesitas anidar contenedores, controlar el flex-wrap, gestionar anchos manualmente...

La señal de que deberías usar Grid es cuando empiezas a luchar contra Flexbox para que los elementos se alineen en más de una dirección.

/* Esto con Flexbox require bastante malabarismo */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* Funciona, pero es frágil */
}

/* Con Grid es directo */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

La versión Grid no solo es más corta: es más predecible. Los elementos siempre tendrán el mismo tamaño mínimo y se adaptarán solos al espacio disponible.

Pueden (y deben) usarse juntos

Grid y Flexbox no son rivales. Un layout real los combina constantemente:

Grid para la estructura macro de la página.
Flexbox para organizar los elementos dentro de cada celda de Grid.

/* Grid para el layout general */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}

/* Flexbox dentro de la tarjeta */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Referencia rápida

Situación	Usa
Centrar un elemento	Flexbox
Barra de navegación	Flexbox
Botones en línea	Flexbox
Layout de página completa	Grid
Galería de imágenes	Grid
Tarjetas con filas y columnas	Grid
Alinear en una dirección	Flexbox
Alinear en dos direcciones	Grid
Layout macro + componentes internos	Ambos

Conclusión

No existe una respuesta universal. Existe la pregunta correcta: ¿una dimensión o dos?

Si te encuentras peleando contra tu CSS para que las cosas se alineen como quieres, probablemente estás usando la herramienta equivocada. Cambia de una a otra y verás cómo el problema se simplifica.

El mejor CSS no es el que demuestra que sabes mucho. Es el que describe exactamente lo que quieres que pase.