tumundoweb
1. El modelo mental correcto
Piensa en CSS como flujo + cajas: todo es una caja con contenido, padding, borde y margen. Flexbox alinea en una dimensión (fila o columna). Grid en dos (filas y columnas). Responsive = mismo HTML, distinto CSS según el ancho.
/* Reset mínimo sensato */
*{box-sizing:border-box}
img{max-width:100%;display:block}
:root{--max:1120px;--gap:20px}2. Flexbox: navbar y centrado perfecto
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.centrado{display:flex;min-height:40vh;align-items:center;justify-content:center}
.cards{display:flex;flex-wrap:wrap;gap:20px}
.cards > *{flex:1 1 240px} /* crecen, encogen, base 240px */💡 gap reemplaza el 90% de los márgenes manuales en flex/grid. Úsalo siempre.
3. Grid: el layout de 12 columnas sin dolor
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.destacado{grid-column:span 2}
@media(max-width:800px){.grid{grid-template-columns:1fr 1fr}.destacado{grid-column:span 2}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.destacado{grid-column:auto}}Este mismo patrón es el que usa la portada de este sitio para las tarjetas de tutoriales.
4. Responsive con 3 breakpoints (no necesitas 10)
| Ancho | Qué cambia |
|---|---|
| ≥ 1024px | 3 columnas, hero en 2 columnas |
| 600–1023px | 2 columnas, menú compacto |
| < 600px | 1 columna, tipografía fluida con clamp() |
h1{font-size:clamp(30px,5vw,56px)} /* fluida sin media queries */5. Trucos pro + checklist
- Usa variables CSS para colores y espaciados
- Imágenes con aspect-ratio para evitar saltos
- Botones min-height 44px (táctil)
- Contraste texto/fondo ≥ 4.5:1
- Prueba a 360px y a 1440px antes de publicar
FAQ
¿Flex o Grid?
Una dimensión → Flex. Dos dimensiones → Grid. Se combinan sin problema.
¿Necesito Bootstrap?
No para la mayoría de webs. CSS moderno puro es más liviano y aprendes de verdad.
