Grid vs Flexbox: cuándo usar cada uno

La pregunta que todo maquetador se hace durante años — ¿esto va con Flexbox o con Grid? — tiene una respuesta de una sola palabra: dimensiones. Hoy instalas el criterio de decisión y activas tu primer grid. El resto del módulo construye sobre esta claridad.

La diferencia de fondo

Flexbox es unidimensional: organiza a lo largo de UNA línea (que puede doblar, pero cada línea va por su cuenta — lo viste en la galería Pinterest: las filas no se coordinan entre sí).

Grid es bidimensional: define filas Y columnas a la vez, y cada pieza sabe en qué celda vive. Las filas y columnas se coordinan porque son parte de la misma retícula.

La regla de decisión

• El contenido manda (los ítems deciden su tamaño y fluyen): Flexbox. Navbar, grupo de botones, tags, media object.
• El layout manda (la estructura existe antes que el contenido): Grid. El esqueleto de la página, dashboards, galerías alineadas en ambos ejes, formularios de columnas parejas.

Y la respuesta completa a la pregunta del título: ambos. La página típica profesional es un GRID grande (el esqueleto) lleno de FLEXBOX pequeños (los componentes). No compiten — trabajan en capas distintas.

Tu primer grid

.retícula {
display: grid;
grid-template-columns: 200px 1fr 1fr;
gap: 12px;
}

<div class="reticula">
<div class="c">1</div><div class="c">2</div><div class="c">3</div>
<div class="c">4</div><div class="c">5</div><div class="c">6</div>
</div>

body { font-family: system-ui; padding: 20px; }
.reticula { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 12px; }
.c { background: #6d28d9; color: white; border-radius: 8px; padding: 20px; font-weight: 700; text-align: center; }

Fíjate en lo que Flexbox no podía darte: la celda 4 está PERFECTAMENTE alineada bajo la 1 — misma columna, sin negociación. Los hijos se colocaron solos en orden (colocación automática); en la lección 5 aprenderás a colocarlos a mano.

Mini-reto

Crea un grid de 3 columnas (100px 1fr 2fr) con 9 divs numerados y observa la colocación automática. Luego cambia a grid-template-columns: 1fr 1fr y mira cómo se reacomodan en 2 columnas sin tocar el HTML. Esa es la estructura mandando.

Qué sigue

Ya tienes el criterio y la retícula básica. La próxima lección profundiza en cómo DEFINIR los tracks: la unidad fr, repeat() para no repetirte y minmax() — la función que hace tracks elásticos con límites.