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.
<!-- 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>grid-cols-2: Crea un grid con 2 columnas de igual ancho.gap-2: Añade un espacio entre las celdas del grid.Aquí se muestra cómo cambiar el número de columnas en función del breakpoint.
<!-- 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>El número de columnas cambia según el tamaño de la pantalla:
md: 2 columnas.lg: 3 columnas.xl: 4 columnas.A continuación, se muestra cómo alinear texto en función del breakpoint.
<div class="mt-5 border p-3 text-center sm:text-left">
<h1>Hola</h1>
</div>text-center: Texto centrado por defecto.sm:text-left: A partir del breakpoint sm, el texto se alinea a la izquierda.Observación: El subgrid hereda la configuración de columnas del grid padre.
<!-- 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>grid-cols-subgrid: Permite que un elemento hijo herede la definición de columnas de su padre, alineándose perfectamente con el grid principal.A continuación, se muestra cómo utilizar col-span para expandir elementos a través de múltiples columnas.
<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>col-span-2: Hace que el elemento ocupe el espacio de 2 columnas.En esta sección, se muestra cómo crear un layout básico con Header, Sidebar y Footer, utilizando Grid de TailwindCSS.
<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>col-span-full: Ocupa todas las columnas disponibles.col-start-2: Fuerza al elemento a comenzar en la línea de columna 2.para este ejemplo, se muestra cómo establecer alturas automáticas para filas en un grid.
<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>auto-rows-[120px]: Establece que todas las filas generadas implícitamente tendrán una altura de 120px.Se muestra cómo crear un layout básico con Sidebar y Contenido, ocupando toda la altura de la pantalla.
<!-- 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>h-screen: Fuerza al contenedor a tener la altura del viewport (100vh).A continuación, se muestra cómo crear una tarjeta con un tamaño fijo y otro que llene su celda.
<!-- 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>w-*) y alto (h-*) controlan la dimensión visual del elemento, independientemente de la celda del grid.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.
<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>-col-start-3: Comienza en la tercera línea contando desde el final hacia el principio.En este ejemplo, se muestra cómo crear un grid flexible sin definir explícitamente las filas.
<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>row-span y col-span puedes crear layouts estilo “masonry” o dashboard complejos.grid-cols-*) → Define la estructura.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.
A continuación, se muestra cómo controlar el ancho (width) en TailwindCSS.
<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>A continuación, se muestra cómo controlar el alto (height) en TailwindCSS.
<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>Aquí se muestra cómo utilizar porcentajes y fracciones para controlar el ancho (width) y alto (height) en TailwindCSS.
<div class="w-1/2">50%</div>
<div class="w-1/3">33%</div>
<div class="h-1/2">50%</div>Observa cómo se utilizan las utilidades de ancho (w-*) y alto (h-*) en diferentes casos de uso.
Se muestra cómo crear una tarjeta con un tamaño fijo y otra que llene toda la pantalla.
<!-- Card fija -->
<div class="w-64 h-32 bg-blue-400"></div>
<!-- Full Pantalla -->
<div class="w-screen h-screen bg-gray-200"></div>En este ejemplo, se muestra cómo hacer un avatar redondo utilizando TailwindCSS.
<img class="w-16 h-16 rounded-full" src="avatar.jpg" />Aquí se muestra cómo centrar horizontalmente un elemento utilizando TailwindCSS.
<div class="w-96 mx-auto"></div>En este escenario, se muestra cómo hacer un elemento responsive en TailwindCSS, cambiando su ancho (width) en diferentes breakpoints.
<div class="w-full md:w-1/2 lg:w-1/3"></div>w-* / h-* → Valores fijos o relativos al padre.screen → Relativo al viewport.full → 100% del contenedor padre.fit → Se ajusta al contenido interno.