CSS/Sass grid gaps not responsive - html

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>

Answer 2

If your problem is the router-link you can try this:
<template>
<div class="container">
<router-link tag="div to="/" v-for="topic in topics" class="topic" :key="topic.id">
<h3>{{ topic.description }}</h3>
<hr />
<p id="count">Completed: 0/17</p>
</router-link>
</div>
</template>