CSS Grid
🎯 Objetivo
Crear layouts 2D con Grid. Grid-template, grid-area, auto-fit.
⚔️ Implementación
/* GRID BÁSICO */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
grid-template-rows: 100px auto;
gap: 20px;
}
/* GRID AREAS */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* HIJO ABARCA MÚLTIPLES CELDAS */
.destacado {
grid-column: 1 / 3; /* Columnas 1-2 */
grid-row: 1 / 3; /* Filas 1-2 */
}
/* AUTO-FIT (responsive automático) */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}🎯 Reto Ninja
MISIÓN DE ARQUITECTURA
🧱 El Maestro del Tablero
1
Crea un contenedor con display: grid y define cuatro áreas usando grid-template-areas: header, sidebar, main y footer.
2
Asigna cada elemento a su área correspondiente usando la propiedad grid-area.
3
Haz que el sidebar ocupe exactamente 200px y el main el resto del espacio disponible.
4
Diseña una sección de "Galería" abajo que use repeat(auto-fit, minmax(200px, 1fr)) para ser responsive sin media queries.
✅ Checklist de Dominio
GRID DOMINADO
