HTML - Resposive photos gallery cover 100% screen

Question

How can i set div with photos on all available space (now in div .row have big margins) and set one height for all photos in all rows (i have vertical and horizontal photos) and keep responsiveness? Margins in row are the same all the time. Ofc the middle photo will be wider to keep the proportions.

HTML:

<main>

<div class="container">

    <div class="row justify-content-sm-center">

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/1.jpg" class="img-fluid img home-photos"></a>

            </figure>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/2.jpg" class="img-fluid img home-photos"></a>

            </figure>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/3.jpg" class="img-fluid img home-photos"></a>

            </figure>

        </div>

    </div>

</div>

Answer 1

If I'm understanding the question properly this CSS should work.

  .row {
  display: flex;
  justify-content: space-around;
}

.img {
  height: 100vh;
  width: 45vh; //play with this to get the effect you desire.  You may need to target the middle picture individually. 
}