My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you!
Below is the code snippet:
<div id="gallery">
<a href="001.jpg"><img class="image" src="001.jpg" ></a>
<a href="002.jpg"><img class="image" src="002.jpg" ></a>
<a href="003.jpg"><img class="image" src="003.jpg" ></a>
<a href="004.jpg"><img class="image" src="004.jpg" ></a>
#gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
column-gap: 10px;
row-gap: 10px;
margin: 0px 30px;
top: 0px;
height: 100%;
align-items: stretch;
}
.image {
display: block;
width: 100%;
margin: 0px;
}
I need help in ensuring that all images remain square within the grid layout. Any suggestions on how to achieve this? Thank you!