CSS Grid vs Flexbox: cuál usar cuándo

CSS Grid cambió la forma de construir páginas desde 2017: más control, layouts bidimensionales y resultados consistentes. Con Tailwind, activar grid, columnas, gap y spans es directo y escalable. Aquí verás cómo pasar de Flexbox a Grid, crear una galería responsive, calcular espaciados y hacer que elementos ocupen varias columnas en un Playground real.

¿Qué aporta CSS Grid frente a Flexbox?

CSS Grid nació como propuesta en 2011, maduró en 2015 y se incorporó a navegadores en 2017. La diferencia clave: Flexbox es unidimensional (eje horizontal o vertical) y Grid es bidimensional (filas y columnas). Esto da mucha más flexibilidad para crear estructuras complejas sin hacks.

• Grid organiza por filas y columnas a la vez.
• Flexbox se enfoca en una sola dimensión.
• Grid facilita componer áreas como header, menú, sección principal y footer.

¿Cómo definir columnas, espaciado y una galería con Tailwind?

Activar Grid con utilidades de Tailwind simplifica la composición. Verás cómo grid, grid-cols y gap distribuyen elementos de forma uniforme y responsive.

¿Cómo definir columnas con grid y grid-cols?

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Elemento uno</div>
  <div class="bg-pink-500 p-4">Elemento dos</div>
  <div class="bg-red-500 p-4">Elemento tres</div>
</div>

• grid activa el contexto de CSS Grid.
• grid-cols-3 define tres columnas.
• gap-4 crea un espaciado uniforme entre columnas y filas.
• Al agregar más elementos, se colocan automáticamente en la siguiente fila.

¿Cómo crear una galería de imágenes responsiva?

Usa un servicio de imágenes tipo "placehold" con parámetros de URL para generar 150x150. Aplica utilidades a cada imagen como rounded y shadow.

<div class="grid grid-cols-4 gap-4 mt-8">
  <img src="https://placehold/150x150" alt="IMG uno" class="rounded shadow" />
  <img src="https://placehold/150x150" alt="IMG dos" class="rounded shadow" />
  <img src="https://placehold/150x150" alt="IMG tres" class="rounded shadow" />
  <img src="https://placehold/150x150" alt="IMG cuatro" class="rounded shadow" />
</div>

• mt-8 añade separación vertical del bloque anterior.
• Puedes aumentar a 2, 3 o 4 columnas ajustando grid-cols-X.
• Se mantiene la distribución uniforme gracias a gap.

¿Qué activa grid-template-columns detrás de grid-cols?

En el Playground verás el mapeo de utilidades a CSS. Por ejemplo, grid-cols-4 activa grid-template-columns con repeat y minmax.

/* grid-cols-4 */
grid-template-columns: repeat(4, minmax(0, 1fr));

• repeat define cuántas columnas.
• minmax asegura tamaños fluidos.
• 1fr reparte el espacio proporcionalmente.

¿Cómo controlar spans y construir layouts reales?

Grid permite que un elemento ocupe varias columnas con col-span. Así se arman combinaciones como héroes anchos, tarjetas destacadas o bloques que atraviesan filas según necesidad.

¿Cómo hacer que un ítem ocupe varias columnas?

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-blue-500 p-4">Elemento 1</div>
  <div class="bg-pink-500 p-4">Elemento 2</div>
  <div class="bg-green-500 p-4">Elemento 3</div>
  <div class="col-span-3 bg-red-500 p-4">Elemento 4</div>
  <div class="col-span-4 bg-gray-500 p-4">Elemento 5</div>
</div>

• col-span-2 hace que el primer bloque ocupe dos columnas de cuatro.
• Los siguientes se acomodan en el espacio restante de la fila.
• col-span-3 y col-span-4 expanden bloques según la composición.

¿Cómo usar la escala de espaciado y medidas?

La escala de Tailwind se basa en incrementos de 4. Aquí un dato clave: gap-4 = 1rem = 16 píxeles. Con esto puedes hacer cálculos rápidos y consistentes.

• Usa gap-4 como mínima proporción uniforme.
• Ajusta márgenes como mt-8 para separar secciones.
• Piensa en rem y píxeles al planear el grid.

¿Cómo dinamizar el layout con JavaScript?

Puedes aplicar o no utilidades como col-span de forma dinámica para que, por ejemplo, una imagen destaque según su tamaño o posición. Esto hace el renderizado del layout más flexible sin tocar el CSS base.

¿Quieres que haga un ejemplo dinámico con JavaScript o que armemos un layout con header, hero, sidebar y footer usando Grid? Cuéntame en los comentarios qué necesitas construir y en qué parte te gustaría profundizar.