Gallery filter with resized images ?

Expected behavior Gallery with image filtering with image resized to all the same size.

Actual behavior Gallery with image filtering, my images are not all the same size... i tried adding grid with rows and columns but i cant use my "categories" anymore ...

Resources (screenshots, code snippets etc.)

  <section id="gallery-block" class="my-5">

        <!-- Grid column -->
        <div class="col-md-12 d-flex justify-content-center mb-5">

          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="all">All</button>
          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="1"><?php echo _e("General Machining"); ?></button>
          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="2"><?php echo _e("Industrial maintenance"); ?></button>
          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="3"><?php echo _e("MIG and TIG Welding"); ?></button>
          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="4"><?php echo _e("Brake Pedal Installation"); ?></button>
          <button type="button" class="btn btn-sm btn-outline-black waves-effect filter" data-rel="5"><?php echo _e("General Repair"); ?></button>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->


      <!-- Grid row -->
      <div class="gallery" id="gallery">

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img1.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img2.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img3.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img4.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img5.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img6.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img7.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img8.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img9.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img10.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 1">
          <img class="img-fluid" src="img/gallery/original/img11.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 3">
          <img class="img-fluid" src="img/gallery/original/img12.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 3">
          <img class="img-fluid" src="img/gallery/original/img13.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 3">
          <img class="img-fluid" src="img/gallery/original/img14.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 4">
          <img class="img-fluid" src="img/gallery/original/img15.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 4">
          <img class="img-fluid" src="img/gallery/original/img16.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 4">
          <img class="img-fluid" src="img/gallery/original/img17.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-12 mb-3 pics animation all 4">
          <img class="img-fluid" src="img/gallery/original/img18.jpg" alt="Card image cap">
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->
    </div>
  </div>
</div>

Thanks for the help !!