Swiper grid module is not working in Next.js app

Question

For two days, I've been really struggling to run a functional Swiper Grid option with my Next.js app. I've tried many stackoverflow solutions and tried different ways to make this grid behavior work with my application, alas! all attempts failed and none of them added a grid feature.

Finally, I implement code examples from Swiper itself. Although the demo code is working on their platform but not in my application. I did nothing but copy the code and create a new page for the Swiper Grid in my Next.js application.

I don't know why it's not behaving as it should. Reference sites and codes are given below:

Working demo reference: https://codesandbox.io/s/20p7zs?file=/src/App.jsx:0-1049

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";


// import required modules
import { Grid, Pagination } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={3}
        grid={{
          rows: 2,
        }}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }}
        modules={[Grid, Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

My Project:

Expected output:

My output:

It would be nice to have some expert advice for this Grid specific problem.

Answer 1

I had this problem. Put a height on the container (not the swiper-wrapper container). Unfortunately the swiper js grid module only works with a fixed height.