Layouts con Flexbox y Grid

Flexbox y Grid en Tailwind

Tailwind proporciona utilidades completas para Flexbox y CSS Grid, facilitando la creación de layouts complejos y responsivos.

Fundamentos de Flexbox

<!-- Habilitar Flexbox -->
<div class="flex">...</div>
<div class="inline-flex">...</div>

<!-- Dirección del Flex -->
<div class="flex flex-row">Horizontal (por defecto)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Horizontal inverso</div>
<div class="flex flex-col-reverse">Vertical inverso</div>

Justify Content (Eje Principal)

<div class="flex justify-start">Inicio (por defecto)</div>
<div class="flex justify-center">Centro</div>
<div class="flex justify-end">Final</div>
<div class="flex justify-between">Espacio entre</div>
<div class="flex justify-around">Espacio alrededor</div>
<div class="flex justify-evenly">Espacio uniforme</div>

Align Items (Eje Cruzado)

<div class="flex items-start">Alinear al inicio</div>
<div class="flex items-center">Alinear al centro</div>
<div class="flex items-end">Alinear al final</div>
<div class="flex items-baseline">Alinear a la línea base</div>
<div class="flex items-stretch">Estirar (por defecto)</div>

Flex Wrap

<div class="flex flex-wrap">Envolver elementos</div>
<div class="flex flex-nowrap">No envolver (por defecto)</div>
<div class="flex flex-wrap-reverse">Envolver inverso</div>

Gap (Espaciado entre elementos)

<div class="flex gap-4">Gap en ambos ejes</div>
<div class="flex gap-x-4">Gap solo horizontal</div>
<div class="flex gap-y-4">Gap solo vertical</div>

Utilidades de Elementos Flex

<div class="flex">
  <div class="flex-1">Crece y se encoge por igual</div>
  <div class="flex-auto">Crece según el contenido</div>
  <div class="flex-none">No crece ni se encoge</div>
  <div class="flex-initial">Se encoge pero no crece</div>
</div>

<!-- Grow y Shrink -->
<div class="grow">Permitir crecimiento</div>
<div class="grow-0">Evitar crecimiento</div>
<div class="shrink">Permitir reducción</div>
<div class="shrink-0">Evitar reducción</div>

<!-- Order -->
<div class="order-first">Primero</div>
<div class="order-last">Último</div>
<div class="order-1">Orden 1</div>

Patrones Comunes de Flexbox

<!-- Contenido centrado -->
<div class="flex items-center justify-center min-h-screen">
  <div>¡Perfectamente centrado!</div>
</div>

<!-- Barra de navegación -->
<nav class="flex items-center justify-between px-6 py-4">
  <div class="font-bold text-xl">Logo</div>
  <div class="flex gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Fila de tarjetas -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 1</div>
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 2</div>
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 3</div>
</div>

Fundamentos de CSS Grid

<!-- Habilitar Grid -->
<div class="grid">...</div>

<!-- Columnas de Grid -->
<div class="grid grid-cols-1">1 columna</div>
<div class="grid grid-cols-2">2 columnas</div>
<div class="grid grid-cols-3">3 columnas</div>
<div class="grid grid-cols-4">4 columnas</div>
<div class="grid grid-cols-12">12 columnas</div>

<!-- Filas de Grid -->
<div class="grid grid-rows-3">3 filas</div>
<div class="grid grid-rows-4">4 filas</div>

Espaciado en Grid

<div class="grid grid-cols-3 gap-4">Gap en ambos ejes</div>
<div class="grid grid-cols-3 gap-x-4 gap-y-8">Gaps diferentes</div>

Span de Elementos en Grid

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-1">1 columna</div>
  <div class="col-span-2">2 columnas</div>
  <div class="col-span-3">3 columnas</div>
  <div class="col-span-full">Ancho completo</div>

  <!-- Span de filas -->
  <div class="row-span-2">2 filas</div>
</div>

<!-- Posiciones de inicio y fin -->
<div class="col-start-2 col-end-4">Columnas 2-3</div>
<div class="row-start-1 row-end-3">Filas 1-2</div>

Patrones Comunes de Grid

<!-- Grid responsivo de tarjetas -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 border rounded">Card 1</div>
  <div class="p-4 border rounded">Card 2</div>
  <div class="p-4 border rounded">Card 3</div>
  <div class="p-4 border rounded">Card 4</div>
  <div class="p-4 border rounded">Card 5</div>
  <div class="p-4 border rounded">Card 6</div>
</div>

<!-- Layout holy grail -->
<div class="grid grid-cols-12 gap-4 min-h-screen">
  <header class="col-span-12 bg-gray-100 p-4">Header</header>
  <aside class="col-span-2 bg-gray-50 p-4">Sidebar</aside>
  <main class="col-span-8 p-4">Main Content</main>
  <aside class="col-span-2 bg-gray-50 p-4">Right Sidebar</aside>
  <footer class="col-span-12 bg-gray-100 p-4">Footer</footer>
</div>

<!-- Grid auto-fit -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div class="p-4 border">Auto-sized card</div>
  <div class="p-4 border">Auto-sized card</div>
  <div class="p-4 border">Auto-sized card</div>
</div>