Ejemplos de Grid
Patrones comunes de layout con flexbox y CSS Grid usando Tailwind CSS.
Patrones de Flexbox
1. Pila horizontal
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.
2. Pila vertical
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.
3. Centrar horizontalmente
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).
4. Centrar verticalmente
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.
5. Centrar en ambas direcciones
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.
6. Espacio entre elementos
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.
7. Espacio alrededor
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.
8. Espacio uniforme
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.
9. Alinear elementos al inicio
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.
10. Alinear elementos al final
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.
11. Estirar elementos
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.
12. Flex con wrap
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.
13. Flex grow
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.
14. Flex shrink
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.
15. Fila invertida
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.
16. Layout de encabezado
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.
17. Tarjeta con encabezado y pie
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.
Patrones de CSS Grid
18. Grid de dos columnas
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.
19. Grid de tres columnas
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.
20. Grid responsive
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.
21. Grid auto-fit
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.
22. Layout con sidebar
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.
23. Layout de dashboard
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.
24. Abarcar varias columnas
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.
25. Abarcar varias filas
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.
26. Grid estilo masonry
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.
27. Variaciones de gap en grid
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.
28. Elemento de grid a ancho completo
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.
29. Alineación en 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.
30. Layout Holy Grail
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.
Relacionado
- Configuración — Instalación de Tailwind CSS v4
- Ejemplos — 30 patrones de utilidades comunes
- Utilidades — Referencia completa de utilidades
- Responsive — Breakpoints de diseño responsive