I've been attempting to create 6 images that are all responsive and the same size. I've tried using just CSS and also tried using bootstrap cards, but I can't seem to achieve the desired result.
I've experimented with flexbox, grids, setting width to 100%, height to auto, height to 400px (the actual height of each image), h-100, object-fit-cover, and many other techniques, but I feel like I'm missing something. My goal is to have all images be 100% wide on mobile, 2 columns on medium screens, and 3 columns on large screens, all while being responsive. I know it shouldn't be this difficult! Any assistance would be greatly appreciated.
<section id="portfolio">
<h2>Portfolio</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card my-5">
<a href="" class="card-link">
<img
src="img/blog.jpg" class="card-img"
alt="landing page for a recipe website, showcasing fresh vegetables, uncooked pasta noodles, hand towel, and wooden spoon"
>
</a>
<h4 class="card-title">Blog</h4>
</div>
</div>
<!-- Additional image cards removed for brevity -->
</div>
</div>
</section>
Here is a screenshot of how my code is currently displaying the images