title: Swiper.JS Rows: 2 is stacking everything resulting in infinite rows
body: <p>I am trying to integrate SwiperJS into a wordpress theme I am creating. I am trying to create a slider with two rows, and it is basically just like their demo here: <a href="https://codesandbox.io/s/x3ty9k?file=/index.html:912-955" rel="nofollow noreferrer">https://codesandbox.io/s/x3ty9k?file=/index.html:912-955</a></p>
  <p>But when I follow the demo, I am left with every slide stacking on top of each other, which is obviously more than 2 rows (12 rows in total right now, and could increase if I add more slides). The weirdest part about it is that the slider registers that there SHOULD be more &quot;pages&quot;, and the left/right buttons and pagination still work (but pressing next just brings you to a blank page of the slider).</p>
  <p><strong>The Problem:</strong> <br />
  Rows are stacking when following the documentation for SwiperJS.</p>
  <p><strong>What I Have tried:</strong></p>
  <ul>
  <li>Gone through my CSS to alter any flex displays, gotten rid of anything that could affect the slider layout</li>
  <li>tried following <a href="https://codepen.io/andreacazzola90/pen/ZEBBXqm" rel="nofollow noreferrer">https://codepen.io/andreacazzola90/pen/ZEBBXqm</a> for a different method of obtaining multi rows with SwiperJS</li>
  <li>Changed around HTML to try the slider with more and less wrappers.</li>
  </ul>
  <p><strong>The JavaScript:</strong></p>
  <pre><code>    var swiper = new Swiper(&quot;.mySwiper&quot;, {
      slidesPerView: 3,
      grid: {
        rows: 2
      },
      spaceBetween: 30,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
    });
  </code></pre>
  <p><strong>The HTML:</strong></p>
  <pre><code>&lt;div class=&quot;swiper mySwiper&quot;&gt;
      &lt;div class=&quot;conference-speakers-cards-container container swiper-wrapper&quot; data-chunksize=&quot;6&quot;&gt;
          &lt;?php 
  
          if ( !function_exists('wpeventin')) {
              echo 'Please Install and Activate the WP Event Solution plugin in order to use the Speakers Section';
          } else {
              wp_reset_query();
              $speaker_array = [];
              $args = [
                  'post_type' =&gt; 'etn-speaker',
                  'posts_per_page' =&gt; -1 
              ];
  
              $the_query = new WP_Query($args);
              if ($the_query-&gt;have_posts()) {
                  while($the_query-&gt;have_posts()) {
                      $the_query-&gt;the_post();
                      $speaker_avatar = apply_filters(&quot;etn/speakers/avatar&quot;, \Wpeventin::assets_url() . &quot;images/avatar.jpg&quot;);
                      $post_meta = get_post_meta(get_the_ID());
                      $speaker_data = [
                          'speaker_name' =&gt; apply_filters('etn_speaker_title', get_the_title()),
                          'speaker_designation' =&gt; $post_meta[&quot;etn_speaker_designation&quot;][0],
                          'speaker_thumbnail' =&gt; has_post_thumbnail() ? get_the_post_thumbnail_url() : $speaker_avatar,
                          'speaker_permalink' =&gt; get_the_permalink()
                      ];
                      
                      array_push($speaker_array, $speaker_data);
                  }
              }
  
              //&lt;!-- SPEAKER CARD TEMPLATE --&gt;
              foreach($speaker_array as $speaker) { ;?&gt;
  
                  
                  &lt;div class=&quot;swiper-slide&quot;&gt;
                      &lt;a href=&quot;&lt;?php echo $speaker['speaker_permalink']; ?&gt;&quot;&gt;
                          &lt;div class=&quot;conference-speaker-card-wrapper &quot;&gt;
                              &lt;div class=&quot;speaker-card-avatar-wrapper&quot;&gt;
                                  &lt;img src=&quot;&lt;?php echo esc_url( $speaker['speaker_thumbnail'] ); ?&gt;&quot; alt=&quot;Picture of &lt;?php echo $speaker['speaker_name']; ?&gt;&quot;/&gt;
                              &lt;/div&gt;
                              
                              &lt;div class=&quot;speaker-card-info-wrapper&quot;&gt;
                                  &lt;div class=&quot;speaker-card-title&quot;&gt;&lt;?php echo $speaker['speaker_name']; ?&gt;&lt;/div&gt;
                                  &lt;div class=&quot;speaker-card-designation&quot;&gt;&lt;?php echo $speaker['speaker_designation']; ?&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              
              &lt;?php
              } ?&gt;
          &lt;?php
          } 
          wp_reset_query();
          ?&gt;
      &lt;/div&gt;
      &lt;!-- If we need pagination --&gt;
      &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  
      &lt;!-- If we need navigation buttons --&gt;
      &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>The SCSS:</strong></p>
  <pre><code>.conference-speakers-container {
      //display: flex;
      //flex-direction: column;
      //min-height: 100vh;
      width: 100vw;
      position: relative;
  
      .conference-speaker-slider-left-arrow {
          position: absolute;
          height: 50px;
          width: 50px;
          font-size: 35px;
          top: 50%;
          left: 50px;
          transform: translate(-50%, 50%);
          color: #909090;
          border: 2px solid #909090;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1010;
          padding-top: 5px;
  
          @include mobile {
              left: 15px;
              height: 35px;
              width: 35px;
              font-size: 28px;
          }
      }
  
      .conference-speaker-slider-right-arrow {
          position: absolute;
          height: 50px;
          width: 50px;
          font-size: 35px;
          top: 50%;
          right: 50px;
          transform: translate(50%, 50%);
          color: #909090;
          border: 2px solid #909090;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1010;
          padding-top: 5px;
  
          .conference-speaker-slider-right-arrow:hover {
              color: $hover-color;
          }
  
          @include mobile {
              right: 15px;
              height: 35px;
              width: 35px;
              font-size: 28px;
          }
      }
  
      .conference-speakers-title-container {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          height: 125px;
  
          .title-word-blue {
              color: $main-color;
              font-size: 2rem;
          }
  
          .title-word-black {
              color: black;
              font-size: 2rem;
              margin-left: 15px;
          }
      }
  
      .conference-speakers {
          //height: calc(100vh - 125px);
          width: 100%;
          background-color: white;
          //display: flex;
          //justify-content: center;
          //align-items: center;
          position: relative;
      }
  
      .mySwiper {
          width: 100%;
          height: 100%;
          margin: auto;
  
          .conference-speakers-cards-container {
              //swiper-wrapper
              //display: flex;
              //justify-content: center;
              //gap: 1em;
              //flex-wrap: wrap;
              padding-bottom: 125px;
              padding-top: 50px;
              //overflow: hidden;
              //min-width: calc(100% - 120px);
              margin: auto;
      
              .swiper-slide {
                  //margin: auto;
                  //min-width: 100%;
                  //display: flex;
                  //justify-content: center;
                  //align-items: center;
                  max-width: 344px;
                  height: calc((100% - 30px) / 2) !important;
                  
                  a {
                      //display: inline-block;
                      .conference-speaker-card-wrapper {
                          box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
                          max-width: 344px;
                          &amp;:hover {
                              transform: scale(1.02);
                              transition: .25s;
                              .speaker-card-info-wrapper {
                                  .speaker-card-title {
                                      color: #0073AE;
                                      text-decoration: underline;
                                      transition: .25s;
                                  }
                              }
                          }
                          .speaker-card-avatar-wrapper {
                              height: 344px;
                              img {
                                  height: 344px;
                                  width: 100%;
                                  object-fit: cover;
                                  object-position: center;
                              }
                          }
              
                          .speaker-card-info-wrapper {
                              background-color: white;
                              color: #2C344A;
                              padding: 10px;
                              text-align: center;
              
                              .speaker-card-title {
                                  font-size: 21px;
                                  font-weight: bold;
                                  margin-bottom: -5px;
                              }
                              .speaker-card-designation {
                                  font-size: 15px;
                              }
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  <p>And yes, there's a lot commented out, and that's because I'm trying to figure this out hahah</p>