🎯 Reto #4: Galería responsive¶
Reto de nivel intermedio
Crea una galería de imágenes responsive con CSS Grid, lightbox y lazy loading. Ideal para practicar Grid y eventos.
🎯 Objetivo¶
Crea una galería que:
- Use CSS Grid para el layout.
- Se adapte a cualquier pantalla.
- Muestre las imágenes en un lightbox al hacer clic.
- Use lazy loading nativo.
🧠 Conceptos¶
- CSS Grid
- Media queries
- Eventos
- `loading="lazy"`
🖥️ Editor¶
Solución
```javascript
document.querySelectorAll('.galeria img').forEach(img => {
img.addEventListener('click', () => {
const w = window.open('');
w.document.write('');
});
});
```
🚀 Retos extra¶
- [ ] Filtros por categoría.
- [ ] Skeleton loader mientras cargan.
- [ ] Modo masonry con CSS columns.