If you want a very easy very quick copy paste gallery that will display all your images using only css, this is the guide for you! It couldn’t be more simple than this.
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
}
.gallery > img {
height: 200px;
width: auto;
object-fit: cover;
border: thick solid black;
}
@media (max-width: 800px) {
.gallery {
flex-direction: column;
align-items: center;
}
.gallery > img {
width: 100%;
max-width: 90vw;
height: auto;
object-fit: contain;
}
}
Simply plop this css snipped into your css file, and define your gallery like so:
<div class="gallery">
<img src="/image1.png">
<img src="/image2.png">
</div>
In HTML!
End result:
