Html CSS/Sass网格缺口未响应

我有一个问题，使我的网格系统的工作，我的集装箱堆叠在彼此之下，而不是一个网格系统的3行

我有这个款式：

.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;

    }
}

使用此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>

{{topic.description}}

已完成：0/17

---

在我决定在我的容器周围放置一个路由器链接之前，我已经把这一切都做好了，所以这是我的问题的根源，但是我当然希望保持这种方式，而不是在里面有一个小链接

在

元素中迭代

元素，因此它们都在第一列中结束。如果这不可能，请原谅我，因为我对Vue不是很熟悉，但你就不能

<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>

{{topic.description}}

已完成：0/17

如果您的问题是

路由器链接

您可以尝试以下方法：

<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>

哇，是的，ofc，但是容器不能作为链接使用，但是容器中的所有元素都可以作为链接使用。你的问题是，在Sass中具体如何做到这一点？或者你根本就不能用香草做吗？如果是前者，请添加标签。如果是后者，请提供编译后的CSS而不是Sass（以及编译后的HTML）。您还应添加Vue标记，以便在此处获得一些Vue用户