Ejemplos de Grid
Patrones comunes de layout con flexbox y CSS Grid usando Tailwind CSS.
//
Busca en todas las páginas de la documentación
Patrones comunes de layout con flexbox y CSS Grid usando Tailwind CSS.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Elementos dispuestos horizontalmente con espaciado.
<div className="flex space-x-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 3</div>
</div>Notas: flex crea una fila por defecto. space-x-4 añade espaciado horizontal entre elementos.
Elementos apilados verticalmente con espaciado.
<div className="flex flex-col space-y-4">
<div className="rounded bg-green-500 px-4 py-2 text-white">Elemento 1</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Elemento 2</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Elemento 3</div>
</div>Notas: flex-col cambia la dirección a vertical. space-y-4 añade espaciado vertical.
Contenido centrado horizontalmente en el contenedor.
<div className="flex justify-center">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Contenido centrado
</div>
</div>Notas: justify-center centra los elementos a lo largo del eje principal (horizontal por defecto).
Contenido centrado verticalmente en el contenedor.
<div className="flex h-64 items-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Centrado verticalmente
</div>
</div>Notas: items-center centra los elementos a lo largo del eje transversal. El contenedor necesita una altura explícita.
Contenido centrado tanto horizontal como verticalmente.
<div className="flex h-64 items-center justify-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Totalmente centrado
</div>
</div>Notas: Combina justify-center e items-center para un centrado perfecto. Común en secciones hero y estados vacíos.
Elementos con el máximo espacio entre ellos.
<div className="flex justify-between">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Izquierda</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Derecha</div>
</div>Notas: justify-between empuja los elementos a los extremos opuestos. Perfecto para encabezados con logo y navegación.
Elementos con espacio igual alrededor de cada uno.
<div className="flex justify-around">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notas: justify-around distribuye los elementos con espacio igual alrededor de cada uno. El espacio en los bordes es la mitad del espacio entre elementos.
Elementos con espacio igual entre ellos y en los bordes.
<div className="flex justify-evenly">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notas: justify-evenly crea un espaciado perfectamente igual, incluidos los bordes.
Elementos alineados arriba (inicio del eje transversal).
<div className="flex h-32 items-start bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Arriba</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Elemento alto</div>
</div>Notas: items-start alinea los elementos arriba en layouts horizontales.
Elementos alineados abajo (final del eje transversal).
<div className="flex h-32 items-end bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Abajo</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Elemento alto</div>
</div>Notas: items-end alinea los elementos abajo en layouts horizontales.
Elementos estirados para llenar la altura del eje transversal.
<div className="flex h-32 items-stretch bg-gray-100">
<div className="rounded bg-purple-500 px-4 text-white">Estirado</div>
<div className="rounded bg-purple-500 px-4 text-white">Estirado</div>
</div>Notas: items-stretch (por defecto) hace que los elementos llenen la altura del contenedor. Útil para tarjetas de igual altura.
Los elementos pasan a la siguiente línea cuando se queda sin espacio.
<div className="flex flex-wrap gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 3</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 4</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Elemento 5</div>
</div>Notas: flex-wrap permite el wrap. gap-4 funciona mejor que space-x-* para layouts con wrap.
Un elemento crece para llenar el espacio disponible.
<div className="flex gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fijo</div>
<div className="flex-1 rounded bg-green-500 px-4 py-2 text-white">Crece</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fijo</div>
</div>Notas: flex-1 hace que el elemento crezca para llenar el espacio disponible. Común en barras de búsqueda y áreas de contenido.
El elemento se reduce cuando el espacio es limitado.
<div className="flex gap-4">
<div className="w-64 flex-shrink-0 rounded bg-blue-500 px-4 py-2 text-white">
Ancho fijo
</div>
<div className="flex-shrink rounded bg-green-500 px-4 py-2 text-white">
Puede reducirse
</div>
</div>Notas: flex-shrink-0 evita la reducción. Útil para sidebars y elementos de ancho fijo.
Elementos en orden horizontal inverso.
<div className="flex flex-row-reverse space-x-4 space-x-reverse">
<div className="rounded bg-purple-500 px-4 py-2 text-white">Primero</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Segundo</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Tercero</div>
</div>Notas: flex-row-reverse invierte el orden. Añade space-x-reverse para corregir la dirección del espaciado.
Encabezado típico con logo, navegación y acciones.
<header className="flex items-center justify-between bg-white px-6 py-4 shadow">
<div className="text-xl font-bold text-gray-900">Logo</div>
<nav className="flex space-x-6">
<a href="#" className="text-gray-700 hover:text-gray-900">Inicio</a>
<a href="#" className="text-gray-700 hover:text-gray-900">Acerca de</a>
<a href="#" className="text-gray-700 hover:text-gray-900">Contacto</a>
</nav>
<button className="rounded bg-blue-600 px-4 py-2 text-white">Iniciar sesión</button>
</header>Notas: Combina justify-between e items-center para un layout de encabezado clásico.
Tarjeta flexbox con encabezado, contenido y pie.
<div className="flex h-64 flex-col rounded-lg border border-gray-200 bg-white shadow">
<div className="border-b border-gray-200 px-4 py-3">
<h3 className="font-semibold text-gray-900">Encabezado de tarjeta</h3>
</div>
<div className="flex-1 overflow-y-auto px-4 py-3">
<p className="text-gray-600">Área de contenido con scroll que crece para llenar el espacio disponible.</p>
</div>
<div className="border-t border-gray-200 px-4 py-3">
<button className="text-sm text-blue-600">Acción</button>
</div>
</div>Notas: flex-1 en el área de contenido hace que crezca. overflow-y-auto habilita el scroll si el contenido es largo.
Layout simple de dos columnas.
<div className="grid grid-cols-2 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Columna 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Columna 2</div>
</div>Notas: grid-cols-2 crea dos columnas iguales. gap-4 añade espaciado entre los elementos del grid.
Tres columnas iguales.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-green-500 p-4 text-white">Col 1</div>
<div className="rounded bg-green-500 p-4 text-white">Col 2</div>
<div className="rounded bg-green-500 p-4 text-white">Col 3</div>
</div>Notas: Usa grid-cols-4, grid-cols-6, etc. para más columnas.
Grid que se adapta al tamaño de pantalla.
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded bg-purple-500 p-4 text-white">Elemento 1</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 5</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 6</div>
</div>Notas: 1 columna en móvil, 2 en tablet, 3 en escritorio. El patrón de grid responsive más común.
Grid que ajusta automáticamente los elementos.
<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Auto 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 3</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 4</div>
</div>Notas: Los elementos hacen wrap automáticamente según el espacio disponible. El ancho mínimo es 200px. Requiere sintaxis de valor arbitrario.
Contenido principal con sidebar de ancho fijo.
<div className="grid grid-cols-[250px_1fr] gap-6">
<aside className="rounded bg-gray-200 p-4">
<h3 className="font-semibold">Sidebar</h3>
<nav className="mt-4 space-y-2">
<a href="#" className="block text-gray-700">Enlace 1</a>
<a href="#" className="block text-gray-700">Enlace 2</a>
</nav>
</aside>
<main className="rounded bg-white p-6 shadow">
<h1 className="text-2xl font-bold">Contenido principal</h1>
<p className="mt-4 text-gray-600">El contenido llena el espacio restante.</p>
</main>
</div>Notas: grid-cols-[250px_1fr] crea un sidebar de 250px y un área principal flexible. Usa valores arbitrarios para tamaños de columna personalizados.
Dashboard de tres columnas con encabezado.
<div className="grid grid-cols-[200px_1fr_300px] grid-rows-[auto_1fr] gap-4">
<header className="col-span-3 rounded bg-blue-600 p-4 text-white">
El encabezado abarca todas las columnas
</header>
<aside className="rounded bg-gray-200 p-4">Sidebar izquierdo</aside>
<main className="rounded bg-white p-6 shadow">Contenido principal</main>
<aside className="rounded bg-gray-200 p-4">Sidebar derecho</aside>
</div>Notas: col-span-3 hace que el encabezado abarque las tres columnas. grid-rows-[auto_1fr] establece la altura del encabezado en auto y el contenido llena el espacio restante.
Elemento que abarca varias columnas del grid.
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 rounded bg-blue-500 p-4 text-white">
Abarca 2 columnas
</div>
<div className="rounded bg-blue-500 p-4 text-white">1 columna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 columna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 columna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 columna</div>
</div>Notas: col-span-2 hace que el elemento ocupe dos columnas. Usa col-span-3, col-span-4, etc. para spans más anchos.
Elemento que abarca varias filas del grid.
<div className="grid grid-cols-3 grid-rows-3 gap-4">
<div className="row-span-2 rounded bg-purple-500 p-4 text-white">
Abarca 2 filas
</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Elemento 5</div>
<div className="col-span-2 rounded bg-purple-500 p-4 text-white">
Abarca 2 columnas
</div>
</div>Notas: row-span-2 hace que el elemento abarque dos filas. Combínalo con col-span-* para layouts complejos.
Grid con alturas de fila variables.
<div className="grid grid-cols-3 gap-4">
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Bajo</div>
<div className="row-span-3 rounded bg-blue-500 p-4 text-white">Muy alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Bajo</div>
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Bajo</div>
</div>Notas: Establece manualmente los row spans para crear el efecto masonry. Para masonry real (empaquetado automático), usa una librería de JavaScript.
Diferentes tamaños de gap para filas y columnas.
<div className="grid grid-cols-3 gap-x-6 gap-y-2">
<div className="rounded bg-green-500 p-4 text-white">Elemento 1</div>
<div className="rounded bg-green-500 p-4 text-white">Elemento 2</div>
<div className="rounded bg-green-500 p-4 text-white">Elemento 3</div>
<div className="rounded bg-green-500 p-4 text-white">Elemento 4</div>
<div className="rounded bg-green-500 p-4 text-white">Elemento 5</div>
<div className="rounded bg-green-500 p-4 text-white">Elemento 6</div>
</div>Notas: gap-x-6 establece el gap horizontal, gap-y-2 el vertical. Úsalo cuando filas y columnas necesiten espaciado diferente.
Elemento del grid que se extiende a todo el ancho.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Elemento 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Elemento 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Elemento 3</div>
<div className="col-span-full rounded bg-purple-500 p-4 text-white">
Elemento a ancho completo
</div>
<div className="rounded bg-blue-500 p-4 text-white">Elemento 4</div>
<div className="rounded bg-blue-500 p-4 text-white">Elemento 5</div>
<div className="rounded bg-blue-500 p-4 text-white">Elemento 6</div>
</div>Notas: col-span-full hace que el elemento abarque todas las columnas, sin importar el número de columnas del grid.
Alinear elementos dentro de las celdas del grid.
<div className="grid grid-cols-3 gap-4">
<div className="flex h-32 items-center justify-center rounded bg-blue-500 text-white">
Centrado
</div>
<div className="flex h-32 items-start justify-start rounded bg-green-500 p-2 text-white">
Arriba izquierda
</div>
<div className="flex h-32 items-end justify-end rounded bg-purple-500 p-2 text-white">
Abajo derecha
</div>
</div>Notas: Usa flexbox dentro de los elementos del grid para una alineación precisa. El grid maneja el layout; flexbox maneja el posicionamiento de los elementos.
Layout clásico con encabezado, pie, sidebar y contenido principal.
<div className="grid min-h-screen grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto]">
<header className="col-span-3 bg-gray-900 p-4 text-white">Encabezado</header>
<aside className="bg-gray-200 p-4">Sidebar izquierdo</aside>
<main className="bg-white p-6">Contenido principal</main>
<aside className="bg-gray-200 p-4">Sidebar derecho</aside>
<footer className="col-span-3 bg-gray-900 p-4 text-white">Pie</footer>
</div>Notas: min-h-screen asegura que el layout llene el viewport. grid-rows-[auto_1fr_auto] hace que el encabezado y el pie se ajusten al contenido y el área principal llene el espacio restante.
Revisado por Chris St. John·Última actualización: 16 jul 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥