Display Flex vs Grid en CSS: diferencias, cuándo usar cada uno y por qué Flexbox explotó

Hay conceptos en CSS que, una vez los entiendes bien, te cambian la forma de maquetar para siempre.
A mí Flexbox me hizo olvidar floats y hacks rarísimos, y Grid terminó de poner orden cuando los layouts empezaron a crecer.

---

El contexto: cómo maquetábamos antes 😅

Hubo una época (no tan lejana) en la que maquetar significaba:

• float: left por todas partes
• clearfix mágicos
• columnas que se rompían con solo mirarlas
• centrar verticalmente algo era… una aventura

Flexbox llegó como una solución directa a alinear elementos, algo sorprendentemente difícil en CSS durante años.

---

Qué es display: flex

Flexbox es un modelo de layout unidimensional.
Esto es clave: una dimensión.

• O trabajas en fila
• O trabajas en columna

Pero no ambas a la vez.

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

Con solo eso ya puedes:

• Alinear horizontalmente
• Centrar verticalmente
• Reordenar elementos
• Adaptar el tamaño automáticamente

Y sin hacks. Solo CSS limpio 🧼

---

El gran boom de Flexbox 🚀

Flexbox explotó por varios motivos:

1. Resolvía problemas reales

   • Centrado vertical
   • Distribución automática
   • Alturas iguales

2. Sintaxis clara

   • justify-content
   • align-items
   • flex-grow

3. Buen soporte temprano

   • Cuando Grid aún no estaba listo, Flexbox ya funcionaba bien en producción

4. Ideal para componentes

   • Menús
   • Headers
   • Cards
   • Barras de navegación

No reemplazó todo… pero sí reemplazó el 80% del CSS “sufrimiento” cotidiano.

---

Qué es display: grid

Grid llega después, y lo hace con otra filosofía: pensar el layout como una cuadrícula completa.

Dos dimensiones:

• Filas
• Columnas

Al mismo tiempo.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

Aquí ya no estás alineando elementos sueltos, estás definiendo la estructura de la página.

---

Diferencia clave: una dimensión vs dos 🧠

La comparación más clara es esta:

Característica	Flexbox	Grid
Dimensiones	1 (fila o columna)	2 (filas y columnas)
Ideal para	Componentes	Layouts completos
Orden visual	Fluido	Control total
Recolocar elementos	Limitado	Muy potente

Si lo piensas así, casi se responde solo qué usar en cada caso.

---

Ejemplo práctico: menú de navegación

Con Flexbox (perfecto aquí)

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

Simple, legible, eficaz ✅ Grid aquí sería innecesario.

---

Ejemplo práctico: layout de página

Header, sidebar, contenido y footer.

Con Grid (mucho más claro)

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

Esto con Flexbox sería posible… pero menos intuitivo y más frágil.

---

Entonces… ¿cuándo usar uno u otro? 🤔

Mi regla mental (muy práctica):

• 🧩 Flexbox

  • Componentes
  • Alineaciones
  • Elementos en línea
  • Cosas que “fluyen”

• 🧱 Grid

  • Estructura de página
  • Layouts complejos
  • Zonas bien definidas
  • Control espacial

Y lo más importante:

No compiten, se complementan

Grid para el esqueleto. Flexbox para los músculos.

---

Usarlos juntos es lo normal hoy

Un patrón muy común:

.page {
  display: grid;
}

.card {
  display: flex;
}

La página se organiza con Grid. Cada card se alinea con Flexbox.

CSS moderno, limpio y mantenible 🛠️

---

❓ FAQ

¿Cuál es la principal diferencia entre Flexbox y Grid?

Flexbox está pensado para layouts en una sola dimensión (fila o columna), mientras que Grid trabaja en dos dimensiones (filas y columnas al mismo tiempo).

¿Cuándo es mejor usar Flexbox en lugar de Grid?

Flexbox es ideal para componentes, alineaciones simples y elementos en una sola dirección, como menús, botones o cards.

¿Por qué Flexbox se popularizó antes que Grid?

Flexbox resolvió problemas históricos de alineación en CSS cuando Grid aún no estaba disponible ni bien soportado por los navegadores.

¿Se pueden usar Flexbox y Grid juntos?

Sí, es una práctica muy común usar Grid para la estructura general y Flexbox para los componentes internos.