Ошибка ширины Swiperjs на 100% внутри сетки ⇐ CSS

[Гость]

У меня возникла проблема при использовании SwiperJS внутри сетки. Когда я помещаю оболочку Swiper внутрь сетки with display:, оболочка переполняется на 100%. Я предоставил ссылку на мой пример JSFiddle. Если вы удалите CSS, вы увидите, что все в норме. Однако когда я добавляю сетку, именно тогда и возникает проблема.
Спасибо.
jsfiddle

Код: Выделить всё

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