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

¿Te has preguntado cuándo usar CSS Grid y cuándo Flexbox? Es una de las dudas más comunes al crear layouts. Ambos son increíblemente poderosos, pero cada uno tiene su momento perfecto.

En este tutorial vas a aprender exactamente cuándo usar cada uno con ejemplos prácticos que podrás usar inmediatamente en tus proyectos.

🤔 ¿Qué vamos a aprender?

• ✅ La diferencia fundamental entre Grid y Flexbox
• ✅ Cuándo usar cada uno (con casos prácticos)
• ✅ Ejemplos reales: navbar, sidebar, cards, gallery
• ✅ Cómo combinar ambos en el mismo proyecto
• ✅ Errores comunes y cómo evitarlos
• ✅ Trucos profesionales para layouts perfectos

🎯 La diferencia clave que debes entender

La diferencia principal es conceptual:

📊 Cuándo usar cada uno: Guía de decisión

💻 Ejemplo 1: Navbar - Perfecto para Flexbox

Un navbar es el ejemplo clásico donde Flexbox brilla. Queremos elementos en una fila con distribución flexible.

📝 HTML:

<div class="navbar">
    <div class="logo">StudyCode Pro</div>
    <nav class="nav-links">
        <a href="#">Inicio</a>
        <a href="#">Blog</a>
        <a href="#">Roadmaps</a>
        <a href="#">Comunidad</a>
    </nav>
    <button class="cta-btn">Únete Gratis</button>
</div>

🎨 CSS con Flexbox:

/* ✅ FLEXBOX: Perfecto para distribución horizontal */
.navbar {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio */
    align-items: center;         /* Centra verticalmente */
    padding: 1rem 2rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-links {
    display: flex;
    gap: 2rem;                    /* Espacio entre enlaces */
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #6366f1;
}

🏗️ Ejemplo 2: Layout de página - Perfecto para Grid

Para un layout completo de página, Grid es la elección obvia. Necesitamos controlar filas Y columnas.

📝 HTML:

<div class="page-layout">
    <header class="header">Header</header>
    <nav class="nav">Nav</nav>
    <main class="main">Main Content</main>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

🎨 CSS con Grid:

/* ✅ GRID: Perfecto para layout bidimensional */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr 250px;  /* Nav fijo, Main flexible, Sidebar fijo */
    grid-template-rows: 80px 1fr 60px;     /* Header fijo, Contenido flexible, Footer fijo */
    grid-template-areas: 
        "header header header"      /* Header ocupa toda la fila */
        "nav main sidebar"          /* Tres columnas en el medio */
        "footer footer footer";    /* Footer ocupa toda la fila */
    min-height: 100vh;
    gap: 1rem;
}

/* Asignamos cada elemento a su área */
.header  { grid-area: header; background: #6366f1; color: white; }
.nav     { grid-area: nav;    background: #f1f5f9; }
.main    { grid-area: main;   background: #fff; }
.sidebar { grid-area: sidebar; background: #f8fafc; }
.footer  { grid-area: footer; background: #334155; color: white; }

/* Responsive: En móviles, una columna */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
    }
}

🖼️ Ejemplo 3: Galería de imágenes - Combinando ambos

A veces la magia sucede cuando combinas Grid y Flexbox. Grid para la estructura, Flexbox para los detalles.

Proyecto 1

React App

Proyecto 2

Vue.js

Proyecto 3

Vanilla JS

Proyecto 4

CSS Grid

Proyecto 5

Node.js

Proyecto 6

Python

🎨 CSS combinado:

/* ✅ GRID: Para la estructura general de la galería */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.gallery-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: translateY(-8px);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ✅ FLEXBOX: Para el contenido de cada item */
.gallery-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    height: 80px;
}

.gallery-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #1f2937;
}

.gallery-info p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

⚠️ Errores comunes que debes evitar

💡 Trucos profesionales

🚀 Ejercicio práctico: Dashboard responsive

Vamos a crear un dashboard que combine Grid y Flexbox perfectamente.

💡 Estructura sugerida:

/* Layout principal: GRID */
.dashboard {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

/* Header navbar: FLEXBOX */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grid de tarjetas: GRID */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Contenido de tarjeta: FLEXBOX */
.card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

🎯 ¿Qué sigue después?

¡Felicidades! Ya sabes cuándo usar Grid vs Flexbox. Tus próximos pasos son:

1. 🎨 CSS avanzado: Animaciones, transforms, variables CSS
2. 📱 Responsive design: Mobile-first, breakpoints, media queries
3. ⚡ CSS moderno: Container queries, subgrid, aspect-ratio
4. 🎯 Frameworks CSS: Tailwind, Bootstrap (opcional)
5. 🚀 JavaScript DOM: Manipular layouts dinámicamente