Playground Interactivo: Aprende Layouts ó Contenedores Flexbox y Grid

Flexbox — 1D Layout

Flexbox ideal para menús, barras, componentes. Controla dirección, alineación y espacio en 1D.

Prueba en movil:
• justify-content: center; — centra horizontal
• flex-direction: column; — columna vertical
• align-items: stretch; — estira cajas
• gap: 20px; — separación amplia
¡Escribe y mira cambios!

.contenedor-flex {

  display: flex;

CSS Grid — 2D Layout

Grid organiza en filas Y columnas. Perfecto para estructuras completas y galerías.

Prueba estos ejemplos (sin repeat):
• grid-template-columns: 1fr 1fr; → dos columnas iguales
• grid-template-columns: 200px 1fr 2fr; → mixto
• grid-template-rows: 80px 100px; → alturas fijas
• gap: 1rem; justify-items: center;
Nota: repeat(2, 1fr) es equivalente a 1fr 1fr

.contenedor-grid {

  display: grid;

Aprende a fondo: repeat(), grid-template-columns y grid-template-rows

La funcion repeat()

¿Que es repeat()? Es un atajo que evita escribir muchas veces el mismo valor. Su sintaxis es: repeat(número de veces, valor).

Ejemplo basico: repeat(3, 1fr) equivale a 1fr 1fr 1fr
Patron mixto: repeat(2, 100px) 1fr → 100px 100px 1fr
Repeticion anidada: repeat(2, 50px auto) → 50px auto 50px auto
Usos comunes: repeat(4, 1fr) para 4 columnas iguales | repeat(auto-fit, minmax(200px, 1fr)) para diseño responsivo

Sin repeat() simplemente escribes los valores separados por espacios: grid-template-columns: 100px 200px 1fr; es perfectamente valido y mas explicito cuando no hay patron repetitivo.

grid-template-columns (Columnas)

Define el ANCHO de las columnas. Cada valor crea una columna. Puedes usar:

fr → fraccion del espacio disponible (flexible)
px, em, rem → medidas fijas
% → porcentaje del contenedor
auto → tamaño automatico segun contenido
minmax(200px, 1fr) → rango minimo y maximo

Ejemplos sin repeat:

grid-template-columns: 200px 1fr; → sidebar fija + contenido flexible
grid-template-columns: 1fr 2fr 1fr; → tres columnas, la del medio doble
grid-template-columns: 80px auto 150px; → mixto fijo+auto+fijo

💡 Analogia: como dividir una pizza en porciones. 1fr 2fr = una porcion y el doble para otra.

grid-template-rows (Filas)

Define el ALTO de las filas. Funciona exactamente igual que columns pero en vertical. Cada valor crea una fila.

grid-template-rows: 100px 200px; → dos filas con alturas fijas
grid-template-rows: auto 1fr auto; → header + main + footer (layout comun)
grid-template-rows: repeat(3, minmax(80px, auto)); → tres filas con altura minima 80px
SIN repeat: grid-template-rows: 80px 120px 1fr; (tres filas explicitas)

Diferencia clave columns vs rows:
• columns → control horizontal (izquierda a derecha)
• rows → control vertical (arriba a abajo)
Juntos crean una cuadricula completa de N filas x M columnas.

Comparativa: Con repeat() vs Sin repeat()

Objetivo	Usando repeat()	Sin repeat() (manual)
3 columnas iguales	`repeat(3, 1fr)`	`1fr 1fr 1fr`
4 columnas de 100px	`repeat(4, 100px)`	`100px 100px 100px 100px`
2 columnas de 1fr y luego 200px	`repeat(2, 1fr) 200px`	`1fr 1fr 200px`
Filas: header 80px, contenido auto, footer 60px	`80px auto 60px` (repeat no aplica)	`80px auto 60px`

¿Cuando usar cada uno? repeat() es ideal para patrones repetitivos (galerias, grid simetrico). La escritura manual es mejor cuando las dimensiones son asimetricas o quieres claridad explicita, por ejemplo: grid-template-columns: 250px 1fr 150px; se lee facilmente: sidebar, contenido principal, sidebar derecha.

Unidad fr (fraccion) explicada con pizza 🍕

Cuando usas grid-template-columns: 1fr 2fr 1fr; el espacio total se divide en 4 partes iguales (1+2+1=4). La primera columna ocupa 1 parte, la segunda 2 partes, la tercera 1 parte. Si el contenedor mide 800px, seria: col1=200px, col2=400px, col3=200px.

Con medidas fijas: grid-template-columns: 200px 1fr 2fr; → primero resta los 200px, el resto se divide en 3 partes (1+2). La segunda columna obtiene 1/3 del resto, la tercera 2/3.

✨ Prueba en el editor: cambia a grid-template-columns: 100px 1fr 2fr; y observa como la columna A se fija en 100px y las otras se reparten el ancho restante.

Ejercicios para copiar en el textarea de Grid

1. Dos columnas iguales:
   grid-template-columns: 1fr 1fr; gap: 15px;

2. Tres columnas mixtas (fija + flexible + flexible):
   grid-template-columns: 120px 2fr 1fr; gap: 12px;

3. Cuatro columnas sin repeat:
   grid-template-columns: 80px 1fr 1fr 80px; gap: 10px;

4. Definir filas y columnas juntas:
   grid-template-columns: 1fr 2fr; grid-template-rows: 80px 120px; gap: 8px;

5. Layout tipo dashboard:
   grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 1rem;

💡 Cada cambio se ve reflejado al instante en la previsualización morada.