CSS/Sass grid gaps not responsive

Question

I have a problem making my grid system work, my containers are stacking up under each other instead of being a grid system of 3 rows.

I have this styling on:

.container {
    display: grid;
    margin: auto;
    width: 65%;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0rem;
    justify-items: center;
}

.topic {
    position: relative;
    width: 350px;
    height: 170px;
    border: 1px solid rgb(214, 214, 214);
    background: white;
    padding: 1rem;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    color: black;
    box-shadow: 2px 1px 1px 1px rgb(228, 228, 228);

    hr {
        color: white;
        text-decoration: none;
    }

    h3 {
        color: black;
        padding-bottom: 4%;
    }

    p {
        color: black;
        padding-top: 20px;
    }

    #count {
        position: absolute;
        bottom: 5%;
        right: 5%;
        font-size: 13px;

    }
}

With this html

<template>
  <div class="container">
    <router-link to="/">
      <div class="topic" v-for="topic in topics" :key="topic.id">
        <h3>{{ topic.description }}</h3>
        <hr />
        <p id="count">Completed: 0/17</p>
      </div>
    </router-link>
  </div>
</template>

I had it all working before I decided to put a router-link around my container, so that's the root of my problem, but I would of course like to keep it this way and not having a small link inside.

Answer 1

You are iterating your <div> element inside the <router-link> element, so they are all ending up inside the first column. Forgive me if this is not possible as I am not very familiar with Vue, but couldn't you just

<template>
    <div class="container">
        <router-link to="/" v-for="topic in topics" >
            <div class="topic" :key="topic.id">
                <h3>{{ topic.description }}</h3>
                <hr />
                <p id="count">Completed: 0/17</p>
            </div>
        </router-link>
    </div>
</template>