Arty - Gallery

Grid Gallery


<div class="row g-2 gallery">
  <div class="col-12 col-md-4">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
</div>

Masonry Gallery


<div class="masonry column-3 spacing-2 gallery">
  <div class="masonry-item">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="masonry-item">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="masonry-item">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="masonry-item">
    <div class="gallery-item">
      <a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
        <img src="../assets/images/col-2.jpg" alt="">
      </a>
    </div>
  </div>
</div>