Кнопка показать еще с grid сеткой

Как релизовать такую сетку чтобы при клике на кнопку оставшиеся блоки вставали по сетке?

// Показать еще
const showMore = document.querySelector('.btn-download');
const cards = document.querySelectorAll('.photo-gallery_content-card').length;

let items = 6;

showMore.addEventListener('click', () => {
  items += 6;
  const array = Array.from(document.querySelector('.photo-gallery_content').children);
  const visItems = array.slice(0 , items);

  visItems.forEach(el => el.classList.add('is-visible'));

  if(visItems.length === cards) {
    showMore.style.display = 'none';
  }
})
.photo-gallery_content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    grid-auto-flow: dense;
}

.photo-gallery_content-card {
    border-radius: 10px;
    width: 100%;
}

.photo-gallery_content-card_img {
    border-radius: 10px;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.card-1 {
    grid-column: 1/5;
    grid-row: 1/2;
}
.card-2 {
    grid-column: 5/9;
    grid-row: 1/2;
}
.card-3 {
    grid-column: 9/13;
    grid-row: 1/2;
}
.card-4 {
    grid-column: 1/4;
    grid-row: 2/2;
}
.card-5 {
    grid-column: 4/7;
    grid-row: 2/2;
}
.card-6 {
    grid-column: 7/10;
    grid-row: 2/2;
}
.card-7 {
    grid-column: 10/13;
    grid-row: 2/2;
}
.card-8 {
    grid-column: 1/5;
    grid-row: 3/3;
}
.card-9 {
    grid-column: 5/9;
    grid-row: 3/3;
}
.card-10 {
    grid-column: 9/13;
    grid-row: 3/3;
}
.card-11 {
    grid-column: 1/4;
    grid-row: 4/4;
}
.photo-gallery_content-card:nth-child(n + 11) {
    display: none;
} 
.photo-gallery_content-card.is-visible {
    display: block;
}
            <div class="photo-gallery_content">
                <a class="photo-gallery_content-card card-1" href="assets/img/gallery-1.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-1.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-2" href="assets/img/gallery-2.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-2.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-3" href="assets/img/gallery-3.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-3.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-4" href="assets/img/gallery-4.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-4.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-5" href="assets/img/gallery-5.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-5.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-6" href="assets/img/gallery-6.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-6.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-7" href="assets/img/gallery-7.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-7.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-8" href="assets/img/gallery-8.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-8.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-9" href="assets/img/gallery-9.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-9.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-10" href="assets/img/gallery-10.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-10.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card card-11" href="assets/img/gallery-1.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-1.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card" href="assets/img/gallery-2.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-2.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card" href="assets/img/gallery-3.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-3.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card" href="assets/img/gallery-4.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-4.jpg" alt="gallery">
                </a>
                <a class="photo-gallery_content-card" href="assets/img/gallery-5.jpg" data-fancybox="gallery">
                    <img class="photo-gallery_content-card_img" src="assets/img/gallery-5.jpg" alt="gallery">
                </a>

            </div>
            <button class="btn-download btn-bg-white">
                <span class="btn-bg-white_span">
                    Показать еще
                </span>
            </button>

введите сюда описание изображения


Ответы (0 шт):