html - CSS/Sass 网格间隙没有响应

Question

我的网格系统无法正常工作，我的容器堆叠在一起，而不是 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>

在我决定在我的容器周围放置一个路由器链接之前，我已经完成了所有工作，所以这是我问题的根源，但我当然希望保持这种方式并且内部没有小链接。

Answer 1

您正在迭代您的 <div> <router-link> 内的元素元素，所以它们都在第一列内结束。如果这不可能，请原谅我，因为我对 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>