Grid doesn't change div positions

Question

So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.

What happens:

div1

div2

div3

What I want to happen:

div1 div2 div3

<div class="jar-lists-wrapper slide-in">
        @foreach($folders as $folder)
        <div class="jar-lists hidden" data-name="{{$folder}}">
            <div class="jar-list box" data-name="{{$folder}}">
                <div class="box-header with-border">
                    <h1 class="box-title">{{$folder}}</h1>
                </div>
                <div class="box-body">
                    <div class="jar-children">
                        @foreach($jars as $jar)
                        @if(strpos($jar, strtolower($folder)) !== false)
                        <div>
                            <h3 class="jar-title">Version:
                                {{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
                            </h3>
                            <form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
                                @if(str_replace('.jar', '', $jar) == $currentJar)
                                <br><button class="btn btn-success" type="submit">Installed</button>
                                @else
                                <br><button class="btn btn-primary" type="submit">Install</button>
                                @endif
                            </form>
                            <br>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
                <div class="box-footer">
                    <a href="#" class="jars-more">View More<i class="fa fa-caret-down"></i></a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

And this is my css:

.main {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2em
}

.jar-lists-wrapper {
    position: relative;
    display: block
}

.jar-lists {
    position: relative;
    margin-bottom: 60px;
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 32.5%);
    justify-content: space-between;
    z-index: 1
}

.jar-lists.hidden {
    display: none
}

.jar-list {
    text-align: center;
}

.jar-title {
    font-size: 16px;
    color: #5e5e5e
}

.jars-more {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center
}

.jars-more {
    padding: 10px 0;
    font-size: 18px;
    color: gray;
    cursor: pointer
}

.jars-more i {
    margin-left: 10px
}

@media screen and (max-width:1250px) {
    .jar-lists {
        grid-template-columns: repeat(2, 47%)
    }

    .jar-list {
        margin-bottom: 30px
    }
}

@media screen and (max-width:900px) {
    .jar-lists {
        grid-template-columns: repeat(1, 100%)
    }
}

Answer 1

div are block level element so they appears horizontally. So use display:inline-block and width

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>1</div>
  <div class='child'>1</div>
</div>

You can also use flex

.parent {
  display: flex;
  flex-direction: row;
}

.child {
  border: 2px solid green;
  width: 150px;
}

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>1</div>
  <div class='child'>1</div>
</div>

You can also use grid

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.child {
  border: 1px solid red;
}

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>1</div>
  <div class='child'>1</div>
  </div