2. Flexbox y CSS Grid: Alinear es fácil
Flexbox: La caja que se estira
Flexbox es un modelo de diseño que hace que los ítems dentro de un contenedor se alineen automáticamente para caber perfectamente. Es ideal para una sola dirección (o fila o columna).
css-flexbox
CSS
1 .contenedor {
2 display: flex;
3 justify-content: center; /* Centra horizontalmente */
4 align-items: center; /* Centra verticalmente */
5 }
- flex-direction: Decide si pones los ítems uno al lado del otro (row) o uno debajo de otro (column).
- gap: La forma moderna de dar separación entre hijos sin usar márgenes.
🗺️ CSS Grid: El Layout Maestro
A diferencia de Flexbox, Grid es para dos dimensiones (filas Y columnas a la vez). Es ideal para crear la estructura entera de una página.
css-grid
CSS
1 .grid-web {
2 display: grid;
3 grid-template-columns: 200px 1fr 200px; /* Tres columnas */
4 gap: 20px;
5 }
- fr: Significa "fraction" (fracción). 1fr significa "usa todo el espacio que sobre de forma equitativa".
- repeat(3, 1fr): Crea 3 columnas iguales rápidamente.
