Guías Técnicas

Layouts con Flexbox y Grid en TailwindCSS

1Flexbox básico

html 
<div class="flex items-center justify-between bg-gray-200 p-4 rounded">
<span class="font-medium">Título</span>
<button class="bg-green-500 hover:bg-green-700 text-white px-3 py-1 rounded-full">
  Acción
</button>
</div>

Contenedor flex con fondo gris, contenido alineado al centro y distribuido a los extremos, que incluye un título y un botón verde con bordes en forma de píldora.

  Nota

  • flex: convierte el contenedor en un flexbox.
  • items-center: alinea los elementos hijos verticalmente al centro.
  • justify-between: distribuye los elementos dejando espacio entre ellos.
  • bg-gray-200: fondo gris claro.
  • p-4: padding interno de 1rem (16px) en todos los lados.
  • rounded: bordes redondeados.
  • font-medium: aplica un peso de fuente medio.
  • bg-green-500: fondo verde (nivel 500).
  • hover:bg-green-700: cambia a un verde más oscuro al pasar el ratón.
  • text-white: color de texto blanco.
  • px-3: padding horizontal de 0.75rem (12px).
  • py-1: padding vertical de 0.25rem (4px).
  • rounded-full: bordes totalmente redondeados (forma de píldora).

2Grid responsivo

html 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-yellow-200 p-4 rounded">Item 1</div>
<div class="bg-red-200 p-4 rounded">Item 2</div>
<div class="bg-purple-200 p-4 rounded">Item 3</div>
<div class="bg-blue-200 p-4 rounded">Item 4</div>
</div>

Cuadrícula responsiva que muestra 1, 2 o 4 columnas según el tamaño de pantalla, con ítems de colores, padding y bordes redondeados.

  Nota

  • grid: convierte el contenedor en un grid.
  • grid-cols-1: establece 1 columna por defecto en pantallas pequeñas.
  • md:grid-cols-2: establece 2 columnas en pantallas medianas (≥768px).
  • lg:grid-cols-4: establece 4 columnas en pantallas grandes (≥1024px).
  • gap-6: añade un espacio de 1.5rem (24px) entre las celdas del grid.
  • bg-yellow-200: fondo amarillo claro.
  • bg-red-200: fondo rojo claro.
  • bg-purple-200: fondo púrpura claro.
  • bg-blue-200: fondo azul claro.
  • p-4: padding interno de 1rem (16px).
  • rounded: bordes redondeados.

3Grid vs Flexbox (comparativa rápida)

html 
<!-- CSS Grid: define columnas explícitas y ubicación bidimensional -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-200 p-2 rounded">A</div>
<div class="bg-blue-200 p-2 rounded">B</div>
<div class="bg-blue-200 p-2 rounded">C</div>
<div class="bg-blue-200 p-2 rounded">D</div>
<div class="bg-blue-200 p-2 rounded">E</div>
<div class="bg-blue-200 p-2 rounded">F</div>
</div>

<!-- Flexbox: unidimensional; usa wrap y basis para simular columnas -->
<div class="flex flex-wrap gap-4 mt-6">
<div class="basis-1/3 bg-green-200 p-2 rounded">A</div>
<div class="basis-1/3 bg-green-200 p-2 rounded">B</div>
<div class="basis-1/3 bg-green-200 p-2 rounded">C</div>
<div class="basis-1/3 bg-green-200 p-2 rounded">D</div>
<div class="basis-1/3 bg-green-200 p-2 rounded">E</div>
<div class="basis-1/3 bg-green-200 p-2 rounded">F</div>
</div>
  Diferencias clave

  • Grid: bidimensional; controla columnas y filas con grid-cols-*/grid-rows-*.
  • Flexbox: unidimensional; controla el eje principal; usa flex-wrap y basis-* para distribuir.
  • Usa Grid para layouts complejos y alineación en dos ejes; Flex para barras, filas y distribución en un eje.

4Qué es grid y grid-cols-* (plantilla de columnas)

html 
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-purple-200 p-4 rounded">Item 1</div>
<div class="bg-purple-200 p-4 rounded">Item 2</div>
<div class="bg-purple-200 p-4 rounded">Item 3</div>
<div class="bg-purple-200 p-4 rounded">Item 4</div>
<div class="bg-purple-200 p-4 rounded">Item 5</div>
<div class="bg-purple-200 p-4 rounded">Item 6</div>
</div>
  Claves

  • grid: activa CSS Grid en el contenedor.
  • grid-cols-N: crea N columnas de igual ancho.
  • Prefijos responsive (sm:, md:, lg:) cambian N según el ancho.
  • gap-*: separa columnas y filas del grid.

5col-span-* (ocupar varias columnas)

html 
<!-- Grid de 4 columnas; algunos ítems ocupan más de una columna -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-yellow-200 p-4 rounded">Columna doble</div>
<div class="bg-yellow-200 p-4 rounded">Item</div>
<div class="bg-yellow-200 p-4 rounded">Item</div>
<div class="col-span-4 bg-yellow-300 p-4 rounded">Fila completa (span 4)</div>
</div>
  ¿Cómo trabaja realmente col-span-x?

  • Aplica grid-column: span X / span X; X es el número de columnas a ocupar.
  • Depende de grid-cols-N: con 4 columnas, col-span-2 ocupa la mitad del ancho.
  • Si no hay columnas libres, el auto-placement mueve el ítem a la siguiente fila.
  • Soporta responsive: md:col-span-2, lg:col-span-3.
  • No tiene efecto en contenedores flex.

html 
<!-- Layout 12 columnas: header, contenido y sidebar responsivos -->
<div class="grid grid-cols-12 gap-4">
<header class="col-span-12 bg-blue-100 p-4 rounded">Header</header>
<main class="col-span-12 md:col-span-8 bg-blue-200 p-4 rounded">Contenido</main>
<aside class="col-span-12 md:col-span-4 bg-blue-300 p-4 rounded">Sidebar</aside>
<footer class="col-span-12 bg-blue-100 p-4 rounded">Footer</footer>
</div>
  Casos de uso

  • col-span-12: bloques que ocupan todo el ancho (header/footer).
  • md:col-span-8 + md:col-span-4: contenido con sidebar a partir de md (≥768px).

6Elemento Flex flex-grow (el elemento crece para llenar el espacio disponible)

html 
<div class="flex bg-gray-200 p-4 space-x-2">
<div class="bg-blue-300 p-2">Caja 1</div>
<div class="bg-green-300 p-2 flex-grow">Caja 2 (crece)</div>
<div class="bg-red-300 p-2">Caja 3</div>
</div>

Contenedor flex con fondo gris y separación entre cajas, donde la segunda caja se expande para ocupar el espacio restante. La Caja 2 se expande y ocupa todo el espacio restante.

  Nota

  • flex: convierte el contenedor en un flexbox.
  • bg-gray-200: fondo gris claro.
  • p-4: padding interno de 1rem (16px).
  • space-x-2: añade un espacio horizontal de 0.5rem (8px) entre los hijos.
  • bg-blue-300: fondo azul claro (nivel 300).
  • p-2: padding interno de 0.5rem (8px).
  • bg-green-300: fondo verde claro (nivel 300).
  • p-2: padding interno de 0.5rem (8px).
  • flex-grow: permite que el elemento crezca y ocupe el espacio restante disponible.
  • bg-red-300: fondo rojo claro (nivel 300).
  • p-2: padding interno de 0.5rem (8px).

7Posición de un elemento absolute, top-0, left-0 (posición absoluta)

html 
<div class="relative bg-gray-100 h-32 w-64 border">
<div class="absolute top-0 left-0 bg-red-400 text-white px-2 py-1">
  Posicionado arriba a la izquierda
</div>
</div>

Contenedor con fondo gris, tamaño fijo y borde, dentro del cual hay una caja roja posicionada en la esquina superior izquierda.

El elemento rojo se coloca en la esquina superior izquierda del contenedor.

  Nota

  • relative: establece que el contenedor padre use posicionamiento relativo (necesario para posicionar hijos absolutos).
  • bg-gray-100: aplica un fondo gris muy claro.
  • h-32: altura fija de 8rem (128px).
  • w-64: ancho fijo de 16rem (256px).
  • border: añade un borde de 1px sólido en todos los lados.
  • absolute: posiciona el elemento de forma absoluta respecto al contenedor padre.
  • top-0: lo coloca en la parte superior (0).
  • left-0: lo coloca en la parte izquierda (0).
  • bg-red-400: fondo rojo (nivel 400).
  • text-white: color de texto blanco.
  • px-2: padding horizontal de 0.5rem (8px).
  • py-1: padding vertical de 0.25rem (4px).