<a> 标记在网格中移动项目

如何解决<a> 标记在网格中移动项目

我想使用网格将 3 个元素排列在一列中，但标签对列造成了问题。当网格在第一个元素中没有标签时，一切正常。如果我在第一个元素中插入标签，它会创建一个洞并移动第一个元素

图片

）。

为什么？ （不知道是不是这个原因，我在项目中安装了bootstrap）

HTML

<section class="topic">
  <div class="multi-themes">
    <div class="single-theme" style="background-image: url('{% static 'images/image.svg' %}')">
      <div class="cont-txt-theme">
        <p class="txt-theme">prova prova</p>
        <p class="sub-txt-theme">prova prova</p>
      </div>
    </div>

    <div class="single-theme" style="background-image: url('{% static 'images/image4.svg' %}')">
      <div class="cont-txt-theme">
        <p class="txt-theme">prova prova</p>
        <p class="sub-txt-theme">prova prova</p>
      </div>
    </div>

    <div class="single-theme" style="background-image: url('{% static 'images/image5.svg' %}')">
      <div class="cont-txt-theme">
        <p class="txt-theme">prova prova</p>
        <p class="sub-txt-theme">prova prova</p>
      </div>
    </div>

CSS

.multi-themes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 25px;
  row-gap: 8px;
  margin: 10px 0 auto 0;
}

.single-theme {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 390px;
  background-color: #102a3a;
  border-radius: 1em;
  color: white;
}

@media (min-width: 320px) and (max-width: 768px) {
  .multi-themes {
    display: grid;
    grid-template-columns: 1fr;
    margin: 10px 0 auto 0;
  }
}

.cont-txt-theme {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  line-height: 35px;
  text-align: center;
}

.txt-theme {
  height: 90px;
  font-size: 42px;
  color: white;
  text-shadow: 0 1px 5px rgba(0,.50);
  font-family: 'Montserrat',sans-serif;
}

.sub-txt-theme {
  color: white;
  justify-content: flex-end;
  font-size: 20px;
  text-shadow: 0 1px 5px rgba(0,.50);
}