ایجاد کردن یک گالری تصاویر با استفاده از آرایه

با سلام
من قطعه د زیر رو دارم و می خوام جاهایی که img هست رو از داخل ارایه بخونم،چی کار باید کنم؟

<section className="gallery py-lg-4 py-md-3 py-sm-3 py-3" id="gallery">
  <div className="container py-lg-5 py-md-4 py-sm-4 py-3">
    <h3 className="title text-center mb-2">Gallery </h3>
    <div className="title-w3ls-text text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum
      </p>
    </div>
    <div className="row gallery-info">
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal1">
            <img src="images/g1.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal2">
            <img src="images/bb2.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal3">
            <img src="images/bb3.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal4">
            <img src="images/g2.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal5">
            <img src="images/g3.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal6">
            <img src="images/g4.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
    </div>
    {/* popup*/}
    <div id="gal1" className="popup-effect">
      <div className="popup">
        <img src="images/g1.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal2" className="popup-effect">
      <div className="popup">
        <img src="images/bb2.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal3" className="popup-effect">
      <div className="popup">
        <img src="images/bb3.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal4" className="popup-effect">
      <div className="popup">
        <img src="images/g2.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal5" className="popup-effect">
      <div className="popup">
        <img src="images/g3.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal6" className="popup-effect">
      <div className="popup">
        <img src="images/g4.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
  </div>
</section>