html:
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="galeria.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Galería de imágenes</h1> <section id="galeria"> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>Un lindo gatito</figcaption> </figure> <figure> <img src="img/mascota.jpg" alt=""/> <figcaption>Amor a los animales</figcaption> </figure> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>El mejor amigo del hombre</figcaption> </figure> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>Un lindo gatito</figcaption> </figure> <figure> <img src="img/mascota.jpg" alt=""/> <figcaption>Amor a los animales</figcaption> </figure> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>El mejor amigo del hombre</figcaption> </figure> </section> </body> </html>
css:
#galeria{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#galeria figure{
width:30%;
margin:1em 0;
}
#galeria figure img{
width: 100%;
}
@media (max-width: 900px) {
#galeria figure{
width:45%
}
}
@media (max-width: 600px) {
#galeria figure{
width:100%
}
}
