03 · Layout

Grid

Mientras flexbox organiza en una sola dirección, grid organiza en dos a la vez (filas y columnas simultáneamente). Cuando el layout que imaginas se parece a una grilla o tablero, grid casi siempre da menos código que flex.

grid + grid-cols-{n}: columnas iguales

grid activa el modelo. grid-cols-3 crea 3 columnas del mismo ancho, y cada hijo directo cae en la siguiente celda automáticamente.

<div class="grid grid-cols-3 gap-3">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

col-span-{n}: que un hijo ocupe varias columnas

Por defecto cada hijo ocupa una sola celda. col-span-2 hace que ocupe el ancho de 2 columnas, útil para destacar un elemento (ej: la primera card de una grilla de noticias).

col-span-2

<div class="grid grid-cols-3 gap-3">
  <div class="col-span-2">Ocupa 2 columnas</div>
  <div>Normal</div>
  <div>Normal</div>
  <div>Normal</div>
</div>

grid-cols responsivo: el patrón de galería

Combinando grid-cols-{n} con breakpoints se arma una galería que muestra menos columnas en mobile y más en desktop, sin escribir media queries a mano.

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
  <!-- 8 items: 2 columnas en mobile, 4 en desktop -->
</div>

→Tailwind es mobile-first: grid-cols-2 aplica siempre, y md:grid-cols-4 lo sobreescribe solo desde el breakpoint md hacia arriba.

grid-cols con auto-fit y minmax: sin definir el número de columnas

En vez de fijar un número exacto de columnas, se le puede pedir a la grilla que quepan tantas columnas de un ancho mínimo como sea posible, y que se repartan el espacio sobrante — se adapta sola a cualquier ancho de pantalla.

<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))">
  <!-- El número de columnas se calcula solo -->
</div>

→Esto no tiene una utilidad corta en Tailwind por defecto — se usa con notación arbitraria: grid-cols-[repeat(auto-fit,minmax(120px,1fr))].

Grid asimétrico: sidebar + contenido

grid-cols-[200px_1fr] define columnas de ancho explícito (una fija de 200px, otra que ocupa el resto con 1fr) — el layout clásico de una app con sidebar.

Sidebar

Contenido

<div class="grid grid-cols-[200px_1fr] gap-4">
  <aside>Sidebar fija</aside>
  <main>Contenido flexible</main>
</div>

→1fr significa 'una fracción del espacio sobrante' — con una sola columna en fr, esa columna absorbe todo lo que no usan las columnas de ancho fijo.

place-items-center: centrar en ambos ejes de una

Atajo para centrar horizontal y verticalmente a la vez dentro de una celda o contenedor grid, sin necesitar justify-items + items por separado.

Centrado

<div class="grid place-items-center h-40 bg-stone-100">
  <div class="bg-amber-200 px-4 py-2 rounded">Centrado en ambos ejes</div>
</div>