Swiperjs шириной на 100%, когда внутренняя сетка ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой, используя Swiperjs в сетке. Когда я помещаю обертку Swiper внутрь A с дисплеем: сетка, обертка переполняется на 100%. Я предоставил ссылку на свой пример JSFiddle. Если вы удалите CSS, вы увидите, что все нормально. Однако, когда я добавляю сетку, это когда возникает проблема. < /P>
Спасибо.




Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9










var swiper = new Swiper(".mySwiper", {
slidesPerView: 6,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});


.item-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 24px;
}


Подробнее здесь: https://stackoverflow.com/questions/764 ... nside-grid