¿Por qué combinar Grid y Flexbox?

CSS Grid es ideal para estructurar la maqueta global de una página (filas y columnas), mientras que Flexbox sobresale en la alineación y distribución de los elementos internos de un contenedor. Al combinarlos obtienes lo mejor de ambos mundos:

• Control total de la estructura 2‑D (grid) y alineación 1‑D (flex).
• Reducción de código redundante y mayor legibilidad.
• Mejor gestión de casos responsivos con minmax(), auto‑fill y flex‑wrap.

Fundamentos rápidos

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

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

Patrones de diseño combinados

1️⃣ Layout de página completa (header, sidebar, main, footer)

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}
.page-header   { grid-column: 1 / -1; }
.page-sidebar  { grid-row: 2; }
.page-main     { grid-row: 2; }
.page-footer   { grid-column: 1 / -1; }
/* Dentro del main usamos Flexbox para tarjetas */
.main-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 200px;
}

El .page usa Grid para la estructura macro, mientras que .main-content emplea Flexbox para distribuir tarjetas de forma fluida.

2️⃣ Galería responsiva con “Masonry” ligera

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem;
}
.gallery-item {
  display: flex;               /* Flexbox dentro de cada celda */
  flex-direction: column;
  background: #f8f9fa;
  border-radius: .25rem;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.gallery-item .info {
  padding: .5rem;
  flex-grow: 1;               /* Empuja el footer a la base */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Grid posiciona los ítems en una cuadrícula fluida, y Flexbox alinea el contenido interno (imagen + descripción) sin importar la altura de la foto.

3️⃣ Tarjetas de producto con “equal height”

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  overflow: hidden;
}
.product-card .body {
  flex: 1 0 auto;               /* hace que todas las tarjetas tengan la misma altura */
  padding: 1rem;
}
.product-card .footer {
  padding: .75rem;
  background: #f1f3f5;
  text-align: center;
}

Utilizando Flexbox dentro de cada tarjeta garantizamos que el botón “Comprar” siempre quede alineado al fondo, sin importar la longitud del texto.

Comparativa rápida (Grid vs Flexbox)

Mejores prácticas y consejos de rendimiento

• Define un fallback con display: block para navegadores que no soporten Grid (aunque hoy el soporte es >99%).
• Utiliza gap en vez de márgenes manuales; reduce el número de reglas y mejora la consistencia.
• Evita anidar demasiados niveles de Grid; si necesitas sub‑grid (aún experimental) usa Flexbox como alternativa.
• Prefiere unidades relativas (fr, minmax) para que el navegador calcule el layout de forma nativa, evitando re‑flows innecesarios.
• Para imágenes de gran tamaño, activa object-fit: cover y loading="lazy" para mejorar la velocidad de carga.
• Revisa la accesibilidad: asegura que el orden visual coincida con el orden del DOM, especialmente cuando usas grid‑area para reordenar elementos.

Solución de problemas comunes

1️⃣ Los ítems se desbordan del contenedor

Comprueba que no haya min‑width o width fija que impida que el fr se reduzca. Usa minmax(0, 1fr) si es necesario.

2️⃣ El gap no funciona en Flexbox

El gap está soportado en Flexbox a partir de Chrome 84, Safari 14 y Edge 84. Para navegadores más antiguos, vuelve a usar márgenes laterales y elimina el último margen con :last-child.

3️⃣ El orden visual no coincide con el DOM

Si utilizas order en Flexbox o grid‑area para reordenar, verifica que la secuencia de lectura (tab) siga el flujo lógico. Añade atributos aria‑label o role cuando sea necesario.

Escalabilidad y compatibilidad

Los navegadores modernos (Chrome, Firefox, Edge, Safari) soportan completamente Grid y Flexbox. En entornos legacy (IE11), solo Flexbox está disponible sin prefijos; para Grid se necesita display: -ms-grid y una sintaxis distinta, lo cual suele evitarse en proyectos nuevos.

Para proyectos que requieran fallback a navegadores antiguos, puedes servir una hoja de estilos alternativa con @supports (display: grid) y, si falla, aplicar una versión basada exclusivamente en Flexbox.