Swiper grid module is not working as expected

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 the same problem and I was able to control it with this solution Add the grid option

fill: "row"

and check again

example:

<Swiper
  slidesPerView={4}
  grid={{
    rows: 3,
    fill: "row",
  }}
  spaceBetween={32}
  pagination={{
    clickable: true,
  }}
  modules={[Grid, Pagination]}
  className="mySwiper"
>
  //...
</Swiper>

Answer 2

Just add this code in a css file:

.swiper-grid-column > .swiper-wrapper{
flex-direction: unset !important;
}

And the problem will be solved.