我遇到了同样的问题，我能够控制它与此解决方案添加网格选项

fill: "row"

字符串
再检查一遍
示例：

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

型

在一个css文件中添加以下代码：

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

字符串
问题就解决了。

类似的事情可以发生在具有卡牌效果的Swiper v9.1.1中。只需添加：

grid={{rows: 1, fill: "row"}}

字符串

这对我很管用

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 (
    <div style={{ height: '30rem' }}> // just insert any height until the grid fits
      <Swiper
        slidesPerView={3}
        grid={{
          rows: 2,
        }}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }}
        modules={[Grid, Pagination]}
        className="mySwiper"
      >
        // each swiperslide should have static height too
        <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>
    </>
  );
}

字符串

解决方案是在_app.js或其他地方添加新的css文件，该文件带有“grid”选项：

import "swiper/css/grid";

字符串
然后，替换之前的css文件：

import "swiper/css/bundle";

型
由

import "swiper/css";

型
这对我很有效。

我有这个问题。在容器上放置一个高度（而不是刮纸容器）。不幸的是，swiper js网格模块只能在固定高度下工作。

React

您不会得到与docs example相同的UI，因为如果查看它们的 * index.html * 文件，您会看到它们将"app"用作根div的id

<div id="app">

字符串
你可能使用"root"作为id，因此你不会得到相同的输出，因为他们给了应用程序 Package 器div一个高度

#app {
  height: 100%;
}

型
因此，如果你用div Package 你的swiper组件并指定height，它应该会像预期的那样工作，你不需要在网格对象中包含fill: "row"：

<div div style={{ height: "600px" }}>
  <Swiper>
    //...
  </Swiper>
</div>

型

Nextjs

使用Nextjs，您必须将 styles.css 文件转换为 styles.module.css，然后导入样式：

import classes from "./styles.module.css";
//...
className={["mySwiper", classes.swiper].join(" ")}
//...
className={classes.swiper_slide} // rename it in the CSS file

型
然后用div Package swiper并给予它一个高度，你会看到样式被应用，但你仍然需要在网格对象中包含fill: "row"以使其按预期工作，但事实上，当你有大量的SwiperSlide时，这会产生一个问题，它不能显示所有的样式。

在我的情况下，我用...
游标设定：

modules={[Grid]}
grid={{rows: 2, fill: 'row'}}

字符串
fill: 'row'是一把钥匙。
和CSS属性：

.swiper-wrapper {
  flex-direction: unset;
  flex-wrap: wrap;
}

型

下一个J，#React