Swiper 嵌套在 display:grid css 中

Question

我正在与 swiperjs 的计算宽度作斗争。

我的滑块正在工作，但是我试图将其放置在我使用 CSS 网格创建的容器内，该容器有 2 列和 2 行，其中滑动器将进入第二行并且跨越两列。然而，宽度计算量是天文数字。我碰巧注意到，如果我调整窗口大小，它的计算也会变大。

我的设置也没有什么特别的...就像我说的，当它不在我的行中时它会起作用。

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

任何想法表示赞赏。

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

min-width: 0我遇到了同样的问题，并通过设置网格项目解决了这个问题。

我在此线程上找到了解决方案：Prevent content from Expanding grid items

Answer 2

我最终改变了 css 网格的位置来解决这个问题，现在它可以嵌套工作。

稍后我可能需要一些时间来测试是否是 CSS 网格导致了问题。