04-layout

04 — Layout: flexbox y grid de toda la vida, con otro traje

El snippet clásico de Bootstrap (contenido principal + barra lateral, col-md-8/col-md-4) reconstruido con Tailwind y CSS Grid nativo.

Qué se ve en esta demo:

• mx-auto max-w-5xl px-4: el container de Bootstrap desmontado en sus piezas.
• grid grid-cols-1 gap-6 md:grid-cols-3: una columna en móvil, tres a partir de pantalla mediana (md: = media query estándar, mobile first).
• md:col-span-2: el contenido principal ocupa dos de las tres columnas; la barra lateral se queda con la que sobra.
• Reutiliza .btn y .card de las demos anteriores (capa components).

Prueba a estrechar la ventana por debajo de 768px: los bloques se apilan solos. Tailwind no tiene sistema de layout propio: esto es CSS Grid del navegador con nombres cortos.

npm install
npm run dev