Using "grid" without specifying the height of "swiper"

[vasilueff]

Check that this is really a bug

• I confirm

Reproduction link

Cant fork it

Bug description

There is a problem when using "grid" without specifying the height of "swiper". The height of each ".swiper-slide" is calculated as a percentage of the total height of the ".swiper-wrapper". And the script does not count the total height of the ".swiper-wrapper".
Because of this, all items are shown in one column.

  const swiperReasons = new Swiper('.swiper-reasons', {
    loop: false,
    grabcursor: true,
    spaceBetween: 0,
    breakpoints: {
        260: {
            slidesPerView: 1,
            loop: true,
            grid: {
                rows: 2,
                },

        },
        768: {
            slidesPerView: 2,
            grid: {
                rows: 4,
                },

        },
    },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-reasons-btn-next',
    prevEl: '.swiper-reasons-btn-prev',
  },
});

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11

Platform/Target and Browser Versions

All browsers

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[alexej-d]

Same here. Using { grid: { fill: 'row' } } works better, but is sometimes not preferable.. This also defeats the purpose of the rows count, when in column mode it is simply ignored

[joelthorner]

I have the same problem. I want a grid of 4 slides in vertical and in row, it doesn't order them well and in column I can't know the total height as they are slides with variable height. 😢

[wowblvck]

I have a same problem too. Is there any solution? @nolimits4web

[FrankJingZhi]

So is there a solution to this problem?

[joelthorner]

[Pfenya]

I found this older comment in an old issue and that solved it for my use case at least.

.swiper-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto; // here is the amount of slidesPerColumn you want
      grid-auto-flow: column;

      & > .swiper-slide {
        height: fit-content;
      }
    }

#3754 (comment)