Swiperjs 100% width bug when inside grid

I am facing an issue while using SwiperJS inside a grid. When I place the Swiper wrapper inside a with display: grid, the wrapper overflows by 100%. I have provided a link to my JSFiddle example. If you remove the CSS, you will see that everything is normal. However, when I add the grid, that's when the problem occurs.

Thank you.

jsfiddle

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<div class="item-grid">
  <div>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

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

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

Solution

By default the 1fr track size is equivalent to minmax(auto, 1fr). To allow children to shrink past their minimum content size, you can set the track size of each column to minmax(0, 1fr) (a minimum width of 0).

.item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 24px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<div class="item-grid">
  <div>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div>content</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 6,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

Alternatively, you can set the min-width of the grid item containing the swiper to 100%.

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

.item-grid > :first-child {
  min-width: 100%;
}