Кнопка показать еще с 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>