Swiper nested inside display:grid css

Question

I'm battling the calculated width, with swiperjs.

I have have my slider working, however I'm trying to place it inside a container I created with CSS grid that has 2 columns, and 2 rows where the swiper is going into the 2nd row and it spans two columns. However the width calculations are astronomically large. I happen to notice that it's calculation also gets bigger if I resize the window.

nothing to special with my settings either... like I said it works when it's not in my row.

https://codepen.io/Johndgraham/pen/VwvmmZL

Any thoughts are appreciated.

var swiper = new Swiper(".swiper-container", {
  slidesPerView: 1,
  spaceBetween: 10,

  // init: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  breakpoints: {
    576: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 40
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
});

Answer 1

I came across the same issue and I've fixed by setting min-width: 0 to the grid items.

I've found the solution on this thread: Prevent content from expanding grid items

Answer 2

I resolved sizing issues with Swiper inside grid by setting .swiper-container and .swiper-wrapper to have display: inherit;

I also set .swiper-slide to have display: inherit; width: auto !important; max-width: 100% !important