I am facing an issue with a 9-cell grid that contains images using Bootstrap columns. The grid is responsive and functions perfectly when only images are present. However, I want to make the images clickable by placing them inside anchor tags (<a>). Unfortunately, this caused the photos to go out of order within the grid.
Upon inspecting in Chrome, I noticed that the <a> tag appears as a large container with the <img> centered inside it. How can I ensure that the <a> element follows the Bootstrap column sizes?
HTML:
<div class="container">
<div class="row">
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
<a href="#">
<img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
</a>
</div>
</div>
CSS:
.gallery-photo {
object-fit: cover;
height: 300px;
margin: 1% 0;
}