Guía completa de CSS Grid vs Flexbox: cuándo usar cada uno

Publicado el 15 de diciembre de 2025 por ximo

Si eres desarrollador web, probablemente te has preguntado más de una vez: ¿debería usar Grid o Flexbox para este layout? La respuesta corta es: ambos son poderosos, pero están diseñados para propósitos diferentes.

En esta guía completa, exploraremos las diferencias fundamentales entre CSS Grid y Flexbox, con ejemplos prácticos que te ayudarán a tomar la decisión correcta en cada proyecto.

La diferencia fundamental

La distinción más importante entre Grid y Flexbox es conceptual:

Flexbox es unidimensional: trabaja en una sola dirección a la vez (filas O columnas)
Grid es bidimensional: trabaja simultáneamente con filas Y columnas

Esta diferencia determina cuándo usar cada uno.

Flexbox: maestro de la alineación unidimensional

¿Cuándo usar Flexbox?

Flexbox brilla cuando necesitas:

Alinear elementos en una sola dirección
Distribuir espacio dinámicamente entre elementos
Centrar contenido vertical u horizontalmente
Crear componentes pequeños y flexibles
Navbars, menús, listas de elementos

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links li {
  color: white;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}

<nav class="navbar">
  <div class="logo">MiLogo</div>
  <ul class="nav-links">
    <li>Inicio</li>
    <li>Productos</li>
    <li>Contacto</li>
  </ul>
</nav>

Propiedades clave de Flexbox

.flex-container {
  display: flex;
  
  /* Dirección del eje principal */
  flex-direction: row | row-reverse | column | column-reverse;
  
  /* Alineación en el eje principal */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  
  /* Alineación en el eje transversal */
  align-items: flex-start | flex-end | center | stretch | baseline;
  
  /* Salto de línea */
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  /* Espaciado entre elementos */
  gap: 1rem;
}

.flex-item {
  /* Crecimiento proporcional */
  flex-grow: 1;
  
  /* Contracción proporcional */
  flex-shrink: 1;
  
  /* Tamaño base */
  flex-basis: auto;
  
  /* Shorthand */
  flex: 1 1 auto; /* grow shrink basis */
}

Caso de uso: Cards con altura flexible

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

.card {
  flex: 1 1 300px; /* Crece, se contrae, base de 300px */
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card-content {
  flex-grow: 1; /* Toma el espacio disponible */
}

.card-actions {
  margin-top: auto; /* Empuja hacia abajo */
}

CSS Grid: arquitecto de layouts complejos

¿Cuándo usar Grid?

Grid es ideal para:

Layouts de página completa
Diseños bidimensionales complejos
Cuando necesitas alinear elementos en filas Y columnas
Galerías de imágenes
Dashboards y aplicaciones

Ejemplo práctico: Layout de página completa

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

.header {
  grid-area: header;
  background: #333;
  color: white;
  padding: 1rem;
}

.sidebar {
  grid-area: sidebar;
  background: #f5f5f5;
  padding: 1rem;
}

.main {
  grid-area: main;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Propiedades clave de Grid

.grid-container {
  display: grid;
  
  /* Definir columnas */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  /* Definir filas */
  grid-template-rows: auto 1fr auto;
  
  /* Espaciado */
  gap: 1rem; /* row-gap y column-gap */
  row-gap: 1rem;
  column-gap: 2rem;
  
  /* Áreas nombradas */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.grid-item {
  /* Posicionamiento explícito */
  grid-column: 1 / 3; /* De línea 1 a 3 */
  grid-row: 1 / 2;
  
  /* O con span */
  grid-column: span 2; /* Ocupa 2 columnas */
  
  /* Áreas */
  grid-area: header;
}

Caso de uso: Galería responsive automática

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

Este código crea automáticamente tantas columnas como quepan, con un mínimo de 250px cada una. ¡Sin media queries!

Comparación directa

Aspecto	Flexbox	Grid
Dimensión	Unidimensional	Bidimensional
Control	Del contenido	Del contenedor
Mejor para	Componentes, alineación	Layouts de página
Complejidad	Más simple	Más robusto
Responsive	Media queries necesarias	Auto-responsive con auto-fit/fill

¿Pueden trabajar juntos?

¡Absolutamente! De hecho, es muy común combinarlos:

/* Grid para el layout general */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Flexbox para cada card */
.dashboard-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

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

.card-footer {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

Ejemplos prácticos del mundo real

1. Holy Grail Layout con Grid

.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
  min-height: 100vh;
}

.header { grid-column: 1 / 4; }
.left-sidebar { grid-column: 1 / 2; }
.main-content { grid-column: 2 / 3; }
.right-sidebar { grid-column: 3 / 4; }
.footer { grid-column: 1 / 4; }

2. Centering perfecto con Flexbox

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

3. Masonry-like layout con Grid

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 20px;
  gap: 1rem;
}

.masonry-item {
  grid-row: span var(--row-span);
}

Árbol de decisión: ¿Cuál usar?

¿Es un layout de página completa?
├─ SÍ → Grid
└─ NO
    └─ ¿Necesitas alinear en filas Y columnas?
        ├─ SÍ → Grid
        └─ NO
            └─ ¿Es una sola dirección (fila o columna)?
                ├─ SÍ → Flexbox
                └─ ¿Necesitas controlar el tamaño individual de elementos?
                    ├─ SÍ → Grid
                    └─ NO → Flexbox

Casos específicos

Usa Flexbox para:

Navegación horizontal/vertical
Centrado vertical
Componentes de UI (botones, inputs en línea)
Listas de items
Distribución igual de espacio

Usa Grid para:

Layouts de aplicación
Galerías de productos
Dashboards
Grids de contenido editorial
Layouts complejos con superposición

Conclusión

No existe una respuesta única sobre cuál es "mejor". Flexbox y Grid son herramientas complementarias:

Flexbox es tu mejor amigo para componentes y alineación unidimensional
Grid es el maestro para layouts complejos bidimensionales
Combinarlos te da superpoderes de layout

La clave está en entender sus fortalezas y aplicar la herramienta correcta para cada situación. Con la práctica, sabrás instintivamente cuál usar.

Consejo final: No te preocupes por usar la "solución perfecta" desde el inicio. Empieza con lo que te resulte más intuitivo y refactoriza si es necesario. Ambas herramientas tienen excelente soporte en navegadores modernos.

¿Qué layout construirás primero?

¿Necesitas ayuda con este tema?

No dudes en contactarme para una asesoría personalizada. ¡Estoy aquí para ayudarte a llevar tu proyecto al siguiente nivel! 🚀