Swiper嵌套内部显示：网格css

我正在和swiperjs争夺计算出的宽度

我有我的滑块工作，但我试图把它放在一个容器内，我用CSS网格创建了一个有2列，2行，其中swiper进入第2行，它跨越两列。然而，宽度计算是天文数字大。我碰巧注意到，如果我调整窗口的大小，它的计算也会变得更大

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

任何想法都很感激

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
    }
  }
});

---

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

---

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

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

---

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

我通过将

.Swiper container

和

.Swiper wrapper

设置为具有

显示：继承，解决了网格内Swiper的大小调整问题

我还将
.swiper slide
设置为具有
显示：继承；宽度：自动！重要的；最大宽度：100%！重要信息
我通过将
.Swiper container
和
.Swiper wrapper
设置为具有
显示：继承，解决了网格内的刷子大小调整问题

我还将
.swiper slide
设置为具有
显示：继承；宽度：自动！重要的；最大宽度：100%！重要信息