CSS Grid vs Flexbox: Cuándo usar cada uno (con ejemplos prácticos)

CSS Grid y Flexbox son los dos sistemas de layout más potentes del CSS moderno, y a menudo se presentan como rivales. En realidad, son herramientas complementarias diseñadas para resolver problemas distintos. Grid sobresale en layouts bidimensionales, donde necesitas controlar filas y columnas simultáneamente, mientras que Flexbox brilla en layouts unidimensionales, distribuyendo espacio a lo largo de un único eje. Esta guía ofrece una comparación detallada con ejemplos prácticos y listos para copiar y pegar, abarcando desafíos de diseño comunes.

La Diferencia Fundamental: 1D vs 2D

La distinción más importante es la dimensionalidad:

• Flexbox es unidimensional. Organiza elementos a lo largo de un solo eje: una fila o una columna. Los elementos pueden envolverse a la siguiente línea, pero cada línea se gestiona de forma independiente.
• CSS Grid es bidimensional. Controla filas y columnas al mismo tiempo, permitiendo posicionar elementos con precisión dentro de una estructura de rejilla definida.

Esto significa que Flexbox es ideal cuando tu layout fluye en una dirección (una barra de navegación, una barra de herramientas, la estructura interna de una tarjeta), mientras que Grid es la opción correcta cuando necesitas alinear elementos en ambos ejes (un layout de página, un dashboard, una galería de fotos).

Fundamentos de Flexbox

Flexbox distribuye el espacio entre los elementos de un contenedor a lo largo del eje principal (horizontal por defecto) y controla la alineación en el eje transversal (vertical por defecto).

.flex-container {
    display: flex;
    flex-direction: row;       /* eje principal: horizontal */
    justify-content: center;   /* alinear a lo largo del eje principal */
    align-items: center;       /* alinear a lo largo del eje transversal */
    gap: 1rem;                 /* espaciado entre elementos */
    flex-wrap: wrap;           /* permitir que los elementos se envuelvan */
}

.flex-item {
    flex: 1 1 200px;
    /* flex-grow: 1   — el elemento puede crecer para llenar espacio */
    /* flex-shrink: 1 — el elemento puede encogerse si es necesario */
    /* flex-basis: 200px — ancho inicial ideal */
}

Propiedades Clave de Flexbox

• justify-content — distribuye los elementos a lo largo del eje principal: flex-start, flex-end, center, space-between, space-around, space-evenly.
• align-items — alinea los elementos a lo largo del eje transversal: stretch, flex-start, flex-end, center, baseline.
• flex-wrap — controla si los elementos se envuelven en nuevas líneas o permanecen en una sola.
• gap — añade espaciado consistente entre elementos sin trucos de márgenes.
• order — cambia el orden visual de un elemento sin alterar el DOM.

Fundamentos de CSS Grid

Grid te permite definir una estructura de layout completa de antemano con filas y columnas explícitas, y luego colocar los elementos en esa estructura.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 columnas iguales */
    grid-template-rows: auto 1fr auto;       /* encabezado, contenido, pie */
    gap: 1.5rem;
    min-height: 100vh;
}

/* Colocar elementos explícitamente */
.header  { grid-column: 1 / -1; }  /* ocupar todas las columnas */
.sidebar { grid-column: 1; }
.main    { grid-column: 2 / -1; }
.footer  { grid-column: 1 / -1; }

Propiedades Clave de Grid

• grid-template-columns / grid-template-rows — definen los tamaños de las pistas (tracks) de la rejilla.
• Unidad fr — representa una fracción del espacio disponible. 1fr 2fr crea dos columnas donde la segunda es el doble de ancha.
• repeat() — atajo para repetir definiciones de pistas: repeat(4, 1fr) crea 4 columnas iguales.
• grid-column / grid-row — colocan elementos por número de línea. 1 / -1 significa "desde la primera línea hasta la última".
• grid-template-areas — nombran regiones de la rejilla para una colocación intuitiva (mostrado en las recetas más adelante).
• minmax() — establece tamaños mínimos y máximos para las pistas: minmax(250px, 1fr).

Comparación Cara a Cara

/* Centrado con Flexbox */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Centrado con Grid — aún más simple */
.center-grid {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

Para un centrado simple, place-items: center de Grid es más conciso. Pero para layouts donde los elementos necesitan distribuirse a lo largo de un solo eje, las opciones de justify-content de Flexbox ofrecen un control más granular.

Comparación de Alineación

Tanto Grid como Flexbox comparten propiedades de alineación, pero se comportan de manera diferente:

• En Flexbox, justify-content funciona a lo largo del eje principal (horizontal por defecto) y align-items a lo largo del eje transversal.
• En Grid, justify-items y align-items actúan sobre los elementos dentro de sus celdas, mientras que justify-content y align-content distribuyen las pistas dentro del contenedor.
• Grid añade place-items y place-content como atajos para establecer ambos ejes a la vez.

Anidamiento de Grid y Flexbox

Los layouts más efectivos combinan ambos sistemas. Usa Grid para la estructura general de la página y Flexbox para layouts de componentes dentro de las celdas de la rejilla.

/* Layout de página con Grid */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 50px;
    min-height: 100vh;
}

/* Barra de navegación dentro de una celda de Grid usa Flexbox */
.navbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

/* Tarjeta dentro del contenido principal usa Flexbox */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}

Patrones Responsivos

Grid de Tarjetas Responsivo con Grid

Una de las características más potentes de Grid es auto-fit / auto-fill con minmax(), que crea rejillas responsivas sin necesidad de media queries.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

/*
 * auto-fill: crea tantas columnas de 280px+ como quepan
 * minmax(280px, 1fr): cada columna tiene al menos 280px,
 *   y crece equitativamente para llenar el espacio restante.
 *
 * Resultado: 1 columna en móvil, 2 en tablet, 3-4 en escritorio.
 * ¡NO se necesitan media queries!
 */

Navegación Responsiva con Flexbox

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

.navbar-brand {
    flex: 0 0 auto; /* no crecer ni encoger */
}

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

/* En pantallas pequeñas, los enlaces ocupan todo el ancho */
@media (max-width: 640px) {
    .navbar-links {
        flex-basis: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
}

Recetas de Layouts para el Mundo Real

Receta 1: Layout del Santo Grial (Holy Grail)

El clásico layout del Santo Grial — encabezado, pie de página, contenido principal con dos barras laterales — es trivial con CSS Grid y grid-template-areas.

.holy-grail {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "left    main    right"
        "footer  footer  footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header;  background: #1a1a2e; }
.left    { grid-area: left;    background: #16213e; }
.main    { grid-area: main;    background: #0f3460; }
.right   { grid-area: right;   background: #16213e; }
.footer  { grid-area: footer;  background: #1a1a2e; }

/* Colapsar barras laterales en móvil */
@media (max-width: 768px) {
    .holy-grail {
        grid-template-areas:
            "header"
            "main"
            "left"
            "right"
            "footer";
        grid-template-columns: 1fr;
    }
}

Receta 2: Grid de Tarjetas Responsivo

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

/* Cada tarjeta usa Flexbox para su layout interno */
.card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-body {
    flex: 1;           /* crece para llenar el espacio disponible */
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    margin-top: auto;  /* empuja el pie de página hacia abajo */
    border-top: 1px solid #eee;
}

Observa la potente combinación: Grid maneja el layout general responsivo de la rejilla (tarjetas de altura uniforme entre filas), mientras que Flexbox maneja la estructura interna de cada tarjeta (empujando el pie de página hacia abajo independientemente de la longitud del contenido).

Receta 3: Layout con Barra Lateral

.sidebar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.content {
    padding: 2rem 3rem;
    overflow-y: auto;
}

/* Apilado en móvil */
@media (max-width: 768px) {
    .sidebar-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
}

Receta 4: Barra de Navegación con Logo, Enlaces y Acciones

.navbar {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background: #1a1a2e;
    color: white;
}

.navbar-brand {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 1.25rem;
    margin-right: 2rem;
}

.navbar-links {
    display: flex;
    gap: 1.5rem;
    flex: 1;  /* ocupa el espacio restante, empujando las acciones a la derecha */
}

.navbar-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.navbar-links a:hover {
    color: white;
}

.navbar-actions {
    display: flex;
    gap: 0.75rem;
    flex: 0 0 auto;
}

Este patrón utiliza el flex: 1 de Flexbox en la sección de enlaces para crear una separación natural entre los enlaces de navegación y los botones de acción a la derecha — no se necesita el truco margin-left: auto.

Cuándo Usar Cada Uno: Guía de Decisión

Utiliza este marco de decisión rápido al elegir entre Grid y Flexbox:

• Usa Flexbox cuando:
  • Estás diseñando elementos en una sola fila o columna.
  • El tamaño del contenido debe determinar el layout (contenido primero).
  • Necesitas distribuir espacio entre elementos de tamaños variables.
  • Ejemplos: barras de navegación, barras de herramientas, filas de formularios, interiores de tarjetas, centrado de un único elemento.
• Usa Grid cuando:
  • Necesitas controlar el layout en dos dimensiones simultáneamente.
  • La estructura del layout debe definirse de antemano (layout primero).
  • Quieres que los elementos se alineen tanto en filas como en columnas.
  • Ejemplos: layouts de página, dashboards, galerías de imágenes, tablas de datos, cualquier diseño que requiera una "rejilla".
• Usa ambos cuando:
  • La estructura de la página usa Grid, y los componentes individuales dentro de las celdas de Grid usan Flexbox.
  • Este es el patrón más común en aplicaciones de producción.

Errores Comunes a Evitar

1. Usar Grid para todo — una simple fila de botones no necesita Grid. Flexbox es más simple y apropiado.
2. Usar Flexbox para layouts de página — aunque es posible, requiere más soluciones alternativas que Grid para estructuras bidimensionales.
3. Olvidar gap — tanto Grid como Flexbox soportan la propiedad gap. Deja de usar trucos de márgenes.
4. No probar con contenido variable — los layouts fallan cuando la longitud del contenido varía. Prueba con contenido corto, largo y ausente.
5. Ignorar min-width: 0 — los elementos flex y grid tienen un min-width: auto implícito que les impide encogerse por debajo del tamaño de su contenido. Añade min-width: 0 para permitir la truncación de texto o el manejo de desbordamiento.

Conclusión

CSS Grid y Flexbox no son tecnologías que compiten entre sí — son socios. Grid se encarga del macro-layout (la estructura general de la página), mientras que Flexbox se encarga del micro-layout (interiores de componentes). El mejor CSS moderno utiliza ambos liberalmente, eligiendo la herramienta adecuada para cada desafío de layout específico. Domina ambos, y podrás construir cualquier diseño que te propongas — de forma limpia, responsiva y sin trucos.