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

您正在forkJoin()元素内迭代<div>元素，因此它们都结束于第一列中。如果这不可能，请原谅我，因为我对Vue不太熟悉，但你不能只是

<router-link>

Answer 2

如果您的问题是router-link，则可以尝试以下操作：

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

CSS / Sass网格间隙无法响应

2 个答案: