module SwiperGrid isn't working.

[selenechin]

Hello! I'm new using nuxt-swiper. I need the grid style but for some reason it's not working. My nuxt version it's 3.3.1.

Here's my code:

<template>
    <Swiper
        class="swiper"
        :grid="{
            rows: 2,
            }"
        :spaceBetween="30"
        :slidesPerView="4"
        :autoplay="{
            delay: 5000,
            disableOnInteraction: false,
        }"
        :pagination="{
            clickable: true,
        }"
        :loop="true"
        :modules="[Pagination, Navigation, Grid]"
    >

 <SwiperSlide  >
    <img src="https://www.nme.com/wp-content/uploads/2022/08/seventeen-wonwoo-iu-knees-cover-youtube-pledis-entertainment.jpg" alt="">
    </SwiperSlide>
    <SwiperSlide  >
    <img src="https://asset-2.tstatic.net/tribunnews/foto/bank/images/fakta-menarik-wonwoo-seventeen-pernah-lupa-lirik-saat-tampil.jpg" alt="">
    </SwiperSlide>
    <SwiperSlide  >
    <img src="https://static.promediateknologi.id/crop/0x0:0x0/750x500/webp/photo/2023/01/09/2375568015.png" alt="">
    </SwiperSlide>
    <SwiperSlide  >
    <img src="https://www.rappler.com/tachyon/2022/04/seventeen-wonwoo.jpg" alt="">
    </SwiperSlide>
    <SwiperSlide  >
    <img src="https://images.gmanews.tv/webpics/2022/04/SEVENTEEN_member_Wonwoo_2022_04_06_13_35_11.png" alt="">
    </SwiperSlide>
    <SwiperSlide  >
    <img src="https://static.promediateknologi.id/crop/152x62:880x486/750x500/webp/photo/2023/01/08/1218840254.jpg" alt="">
    </SwiperSlide>
  </template>

 <script setup lang="ts">
import { Navigation, Autoplay, Pagination, Grid} from 'swiper';
import 'swiper/css/grid';

</script> 

and it looks like this:

Can someone, please guide me? 🙏🏻.

[cpreston321]

Can you make a StackBlitz reproduction? 🙏🏻

[NevodD]

Hi. Add it height through CSS styles for .swiper-wrapper and .swiper-slide https://open-code.tech/en/post-943/