Guías Técnicas

Grid Avanzado y Dimensiones en TailwindCSS

Esta sección profundiza en el sistema de Grid de TailwindCSS, cubriendo desde configuraciones básicas hasta layouts complejos como subgrids y diseños de página completa.

1Grid básico + container

html 
<!-- Grid simple dentro de container -->
<div class="container mx-auto mb-5 border bg-purple-200 p-4">
<div class="grid grid-cols-2 gap-2">
  <div class="bg-red-300 p-2 text-center">1</div>
  <div class="bg-red-600 p-2 text-center text-white">2</div>
</div>

<!-- Texto fuera del grid -->
<h2 class="mt-5 text-center font-bold">Hola Mundo</h2>
</div>
  Explicación

  • grid-cols-2: Crea un grid con 2 columnas de igual ancho.
  • gap-2: Añade un espacio entre las celdas del grid.

2Grid responsive

Aquí se muestra cómo cambiar el número de columnas en función del breakpoint.

html 
<!-- Cambia columnas según breakpoint -->
<div class="grid gap-4 border bg-amber-100 p-3
          grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="rounded-xl bg-gray-600 p-2 text-center text-white">01</div>
<div class="bg-purple-300 p-2">02</div>
<div class="bg-green-500 p-2">03</div>
<div class="bg-red-300 p-2">04</div>
<div class="bg-amber-600 p-2">05</div>
<div class="bg-yellow-500 p-2">06</div>
</div>
  Responsive

El número de columnas cambia según el tamaño de la pantalla:

  • Móvil (por defecto): 1 columna.
  • md: 2 columnas.
  • lg: 3 columnas.
  • xl: 4 columnas.

3Texto responsive (alineación)

A continuación, se muestra cómo alinear texto en función del breakpoint.

html 
<div class="mt-5 border p-3 text-center sm:text-left">
<h1>Hola</h1>
</div>
  Nota

  • text-center: Texto centrado por defecto.
  • sm:text-left: A partir del breakpoint sm, el texto se alinea a la izquierda.

4Subgrid (Avanzado)

Observación: El subgrid hereda la configuración de columnas del grid padre.

html 
<!-- El subgrid hereda columnas del padre -->
<div class="grid grid-cols-4 gap-4 border p-3">
<div class="bg-blue-200 p-2">01</div>
<div class="bg-blue-300 p-2">05</div>

<div class="col-span-3 grid grid-cols-subgrid gap-4 bg-blue-100 p-2">
  <div class="col-start-2 bg-blue-500 p-2 text-white">06</div>
</div>
</div>
  Concepto Subgrid

  • grid-cols-subgrid: Permite que un elemento hijo herede la definición de columnas de su padre, alineándose perfectamente con el grid principal.

5Col-span (Ocupar columnas)

A continuación, se muestra cómo utilizar col-span para expandir elementos a través de múltiples columnas.

html 
<div class="grid grid-cols-3 gap-4 border p-3">
<div class="bg-gray-300 p-2">01</div>
<div class="bg-gray-400 p-2">02</div>
<div class="bg-gray-500 p-2">03</div>

<div class="col-span-2 bg-green-400 p-2">04</div>
<div class="bg-green-300 p-2">05</div>

<div class="col-span-2 bg-green-500 p-2">07</div>
</div>
  Expansión

  • col-span-2: Hace que el elemento ocupe el espacio de 2 columnas.

6Layout Header / Sidebar / Footer

En esta sección, se muestra cómo crear un layout básico con Header, Sidebar y Footer, utilizando Grid de TailwindCSS.

html 
<div class="grid grid-cols-6 gap-2 border p-2">
<div class="col-span-full bg-amber-200 p-2">Header</div>

<div class="col-span-2 bg-amber-600 p-2 text-white">Sidebar</div>
<div class="col-span-4 bg-yellow-300 p-2">Contenido</div>

<div class="col-span-4 col-start-2 bg-red-200 p-2">
  Footer centrado
</div>
</div>
  Posicionamiento

  • col-span-full: Ocupa todas las columnas disponibles.
  • col-start-2: Fuerza al elemento a comenzar en la línea de columna 2.

7Alturas automáticas (auto-rows)

para este ejemplo, se muestra cómo establecer alturas automáticas para filas en un grid.

html 
<div class="grid grid-cols-4 auto-rows-[120px] gap-2 border p-2">
<div class="col-span-2 h-full bg-purple-400 p-2 text-white">
  Altura fija por fila
</div>
</div>
  Filas automáticas

  • auto-rows-[120px]: Establece que todas las filas generadas implícitamente tendrán una altura de 120px.

8Layout pantalla completa

Se muestra cómo crear un layout básico con Sidebar y Contenido, ocupando toda la altura de la pantalla.

html 
<!-- Sidebar + contenido -->
<div class="grid h-screen grid-cols-5">
<aside class="col-span-1 bg-gray-400 p-2">Sidebar</aside>
<main class="col-span-4 bg-blue-200 p-2">Main</main>
</div>
  Viewport Height

  • h-screen: Fuerza al contenedor a tener la altura del viewport (100vh).

9Tamaño fijo vs Llenar celda

A continuación, se muestra cómo crear una tarjeta con un tamaño fijo y otro que llene su celda.

html 
<!-- Card con tamaño fijo -->
<div class="grid grid-cols-3 border p-3">
<div class="h-32 w-48 bg-green-400 p-2">Card fija</div>
</div>

<!-- Item que llena su celda -->
<div class="grid grid-cols-3 gap-2 border p-3">
<div class="h-full w-full bg-blue-400 p-2 text-white">A</div>
</div>
  Diferencia

  • Las utilidades de ancho (w-*) y alto (h-*) controlan la dimensión visual del elemento, independientemente de la celda del grid.

10Posición exacta (start + span)

A continuación, se muestra cómo posicionar un elemento en una fila y columna específicas, y cómo expandirlo a través de múltiples celdas.

html 
<div class="grid grid-cols-12 border p-2">
<div class="col-span-4 col-start-2 border border-green-400 p-2">
  Contenido
</div>

<div class="col-span-2 -col-start-3 border border-red-400 p-2">
  Último
</div>
</div>
  Grid Lines Negativas

  • -col-start-3: Comienza en la tercera línea contando desde el final hacia el principio.

11Grid flexible sin rows

En este ejemplo, se muestra cómo crear un grid flexible sin definir explícitamente las filas.

html 
<div class="grid grid-cols-5 auto-rows-min gap-4 border p-3">
<div class="col-span-5 bg-blue-400 p-2 text-white">1</div>

<div class="row-span-3 bg-green-400 p-2 text-white">2</div>
<div class="col-span-3 row-span-2 bg-yellow-400 p-2">3</div>
<div class="row-span-3 bg-red-400 p-2 text-white">4</div>

<div class="col-span-3 bg-purple-400 p-2 text-white">5</div>
<div class="col-span-5 bg-gray-400 p-2 text-white">6</div>
</div>
  Flexibilidad

  • El Grid crea filas automáticamente según se necesiten. Usando row-span y col-span puedes crear layouts estilo “masonry” o dashboard complejos.

  Resumen Mental

  • Grid (grid-cols-*) → Define la estructura.
  • col-span / row-span → Define el tamaño (cuántas celdas ocupa).
  • start / end → Define la posición exacta.
  • w / h → Define la dimensión interna del contenido.

Dimensiones y Tamaños

Para controlar el ancho (width) y alto (height) en TailwindCSS, se muestra cómo utilizar las utilidades de ancho (w-*) y alto (h-*).

Controlar el ancho (width) y alto (height) es fundamental en TailwindCSS.

1Ancho (Width)

A continuación, se muestra cómo controlar el ancho (width) en TailwindCSS.

html 
<div class="w-32">32 = 8rem</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>
<div class="w-auto">auto</div>
<div class="w-fit">al contenido</div>
<div class="w-min">mínimo posible</div>
<div class="w-max">máximo posible</div>

2Alto (Height)

A continuación, se muestra cómo controlar el alto (height) en TailwindCSS.

html 
<div class="h-16">16 = 4rem</div>
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-auto">auto</div>
<div class="h-fit">al contenido</div>

3Porcentajes y Fracciones

Aquí se muestra cómo utilizar porcentajes y fracciones para controlar el ancho (width) y alto (height) en TailwindCSS.

html 
<div class="w-1/2">50%</div>
<div class="w-1/3">33%</div>
<div class="h-1/2">50%</div>

4Casos de Uso Comunes

Observa cómo se utilizan las utilidades de ancho (w-*) y alto (h-*) en diferentes casos de uso.

Card Fija vs Full Pantalla

Se muestra cómo crear una tarjeta con un tamaño fijo y otra que llene toda la pantalla.

html 
<!-- Card fija -->
<div class="w-64 h-32 bg-blue-400"></div>

<!-- Full Pantalla -->
<div class="w-screen h-screen bg-gray-200"></div>

Avatar Redondo

En este ejemplo, se muestra cómo hacer un avatar redondo utilizando TailwindCSS.

html 
<img class="w-16 h-16 rounded-full" src="avatar.jpg" />

Centrado Horizontal

Aquí se muestra cómo centrar horizontalmente un elemento utilizando TailwindCSS.

html 
<div class="w-96 mx-auto"></div>

Responsive Width

En este escenario, se muestra cómo hacer un elemento responsive en TailwindCSS, cambiando su ancho (width) en diferentes breakpoints.

html 
<div class="w-full md:w-1/2 lg:w-1/3"></div>
  Regla Rápida

  • w-* / h-* → Valores fijos o relativos al padre.
  • screen → Relativo al viewport.
  • full → 100% del contenedor padre.
  • fit → Se ajusta al contenido interno.