CSS Grid inside slider not working...

[viandian]

So I'm coding a product slider with 3 products on each page along with a little information below each image. I chose to do it with CSS grid. The thing is, image 2 is showing up below image 1, not beside it.

Here's the code. I'm a beginner tho, so please excuse me if I make dumb mistakes. I included only the parts for the third slide, which the slide where I tried the grid thing.

       <!-- SLIDE 3 -->
<div class="mySlides fade slideshowgrid-container">
 
  <div class="s3img1"><img src="#"></img></div>
      
  <div class="s3img2"><img src="#"></img></div>
 
  <img class="s3img3"></img>
  <img class="s3text1"></img>
  <img class="s3text2"></img>
  <img class="s3text3"></img>
</div>
      

<style>
.slideshowgrid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 600px 80px;
    justify-content: center;
}


/* FROM W3 */

.mySlides {display: block; width: 600px;}


/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;

  top: 200px;
}

.slideshow-container img {
    width: 300px;
    position: relative;
    bottom: 80px;
}

</style>

 

[viandian]

PROBLEM SOLVED!!!!!

The problem was the small width! The grid container had more than one class assigned to it, so I didn't see that the width was set too small.

Has been troubling me for weeks (was also working on other tasks instead) but the solution was that simple!!