css

Tailwind CSS

Grid

Flexbox

Responsive

Layouts

Tailwind CSS: Grid y Flexbox para Layouts Modernos

Aprende a crear layouts responsive y modernos con Tailwind CSS: Grid, Flexbox, y utilidades de spacing para diseños profesionales.

Miguel Torres

UI/UX Designer especializado en sistemas de diseño con Tailwind

8 de noviembre de 2025

14 min

Tailwind CSS: Layouts Modernos con Grid y Flexbox

Tailwind CSS revoluciona la forma en que creamos layouts. Con sus utilidades de Grid y Flexbox, podemos construir diseños responsive sin escribir CSS personalizado.

En esta guía dominarás las técnicas esenciales para crear layouts profesionales con Tailwind CSS.

Flexbox: Layouts Unidimensionales

Flexbox es perfecto para layouts en una dimensión (fila o columna). Tailwind hace que sea increíblemente simple.

Flex Básico: Centrado Horizontal y Vertical

html

flex-center.html

1<div class="flex items-center justify-center min-h-screen">
2  <div class="text-center">
3    <h1 class="text-4xl font-bold">Centrado Perfecto</h1>
4    <p class="text-gray-600">Con solo 3 clases</p>
5  </div>
6</div>

Explicación de las clases:

Clases Flexbox de Tailwind

Clase	CSS Equivalente	Descripción
flex	display: flex	Activa flexbox
items-center	align-items: center	Centrado vertical
justify-center	justify-content: center	Centrado horizontal
gap-4	gap: 1rem	Espacio entre elementos

Flex Direction: Row vs Column

html

flex-direction.html

1<!-- Horizontal (por defecto) -->
2<div class="flex gap-4">
3  <div>Item 1</div>
4  <div>Item 2</div>
5  <div>Item 3</div>
6</div>
7
8<!-- Vertical -->
9<div class="flex flex-col gap-4">
10  <div>Item 1</div>
11  <div>Item 2</div>
12  <div>Item 3</div>
13</div>
14
15<!-- Responsive: column en mobile, row en desktop -->
16<div class="flex flex-col md:flex-row gap-4">
17  <div>Item 1</div>
18  <div>Item 2</div>
19  <div>Item 3</div>
20</div>

Buena práctica: Usa flex-col en mobile y md:flex-row en desktop para diseños responsive mobile-first.

Grid: Layouts Bidimensionales

CSS Grid es ideal para layouts en dos dimensiones (filas Y columnas). Tailwind lo hace extremadamente fácil.

Grid de 3 Columnas

html

grid-3col.html

1<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
2  <div class="bg-blue-100 p-6 rounded-lg">Card 1</div>
3  <div class="bg-blue-100 p-6 rounded-lg">Card 2</div>
4  <div class="bg-blue-100 p-6 rounded-lg">Card 3</div>
5  <div class="bg-blue-100 p-6 rounded-lg">Card 4</div>
6  <div class="bg-blue-100 p-6 rounded-lg">Card 5</div>
7  <div class="bg-blue-100 p-6 rounded-lg">Card 6</div>
8</div>

Este código crea:

Responsive Grid Breakpoints

Breakpoint	Columnas	Ancho Pantalla
(default)	1 columna	< 768px (mobile)
md:	2 columnas	≥ 768px (tablet)
lg:	3 columnas	≥ 1024px (desktop)

Grid con Span

html

grid-span.html

1<div class="grid grid-cols-3 gap-4">
2  <!-- Ocupa 2 columnas -->
3  <div class="col-span-2 bg-purple-100 p-6">
4    Contenido Principal (2 columnas)
5  </div>
6  
7  <!-- Ocupa 1 columna -->
8  <div class="bg-gray-100 p-6">
9    Sidebar (1 columna)
10  </div>
11  
12  <!-- Ocupa todas las 3 columnas -->
13  <div class="col-span-3 bg-green-100 p-6">
14    Footer (3 columnas)
15  </div>
16</div>

Layout Dashboard Completo

Veamos un ejemplo real de dashboard con Grid y Flexbox combinados:

html

dashboard.html

1<div class="min-h-screen bg-gray-50">
2  <!-- Header -->
3  <header class="bg-white shadow flex items-center justify-between px-6 py-4">
4    <h1 class="text-2xl font-bold">Dashboard</h1>
5    <button class="px-4 py-2 bg-blue-600 text-white rounded">Logout</button>
6  </header>
7  
8  <!-- Main Grid Layout -->
9  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
10    <!-- Sidebar -->
11    <aside class="lg:col-span-1 bg-white rounded-lg shadow p-6">
12      <nav class="flex flex-col gap-4">
13        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
14        <a href="#" class="text-gray-700 hover:text-blue-600">Users</a>
15        <a href="#" class="text-gray-700 hover:text-blue-600">Settings</a>
16      </nav>
17    </aside>
18    
19    <!-- Main Content -->
20    <main class="lg:col-span-3">
21      <!-- Stats Grid -->
22      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
23        <div class="bg-white rounded-lg shadow p-6">
24          <p class="text-gray-600 text-sm">Total Users</p>
25          <p class="text-3xl font-bold">1,234</p>
26        </div>
27        <div class="bg-white rounded-lg shadow p-6">
28          <p class="text-gray-600 text-sm">Revenue</p>
29          <p class="text-3xl font-bold">$56,789</p>
30        </div>
31        <div class="bg-white rounded-lg shadow p-6">
32          <p class="text-gray-600 text-sm">Orders</p>
33          <p class="text-3xl font-bold">890</p>
34        </div>
35      </div>
36      
37      <!-- Content Card -->
38      <div class="bg-white rounded-lg shadow p-6">
39        <h2 class="text-xl font-bold mb-4">Recent Activity</h2>
40        <p class="text-gray-600">Dashboard content goes here...</p>
41      </div>
42    </main>
43  </div>
44</div>

Comparación: Grid vs Flexbox

¿Cuándo usar Grid vs Flexbox?

Aspecto	Flexbox	Grid
Dimensiones	1D (fila o columna)	2D (filas y columnas)
Mejor para	Navbars, botones, lists	Layouts, dashboards, galleries
Alineación	Excelente para centrado	Control total bidimensional
Responsive	Wrap automático	Cambio de columnas por breakpoint

Regla general: Usa Flexbox para componentes pequeños (navbar, cards). Usa Grid para layouts completos (dashboard, gallery).

Conclusión

Tailwind CSS hace que crear layouts complejos sea increíblemente simple con sus utilidades de Grid y Flexbox.

Domina estos conceptos y podrás construir cualquier layout sin escribir CSS personalizado. ¡Prueba los ejemplos y experimenta! 🎨

¿Te gustó este artículo?

¡Compártelo con tu comunidad!

También te podría interesar

Tecnología, Gadgets e Innovación

El Color Azul en 2025: Psicología, Diseño y Tendencias

El azul no es solo un color. Es confianza, serenidad, profesionalismo. En 2025, el azul continúa siendo el color más utilizado en interfaces digitales,...

#azul#color#tecnologia-general

21 nov

2 min min

tutoriales