html - 使文本/ div 消失

Question

使用videoCSS Grid 内部时，我的文本.name消失了，而使用img

我已经建立了一个画廊，将在其中展示项目：

<div class="project"> <!-- Project 11 -->
  <video class="item" src="./images/motiondesign/11.mp4" alt="Project #11" controls loop>
  <div class="name">
    <h3>trippy</h3>
    <p class="date">november 2019<p>
    <p class="description">Lorem ipsum...</p>
  </div>
</div>
<div class="project"> <!-- Project 10_2 -->
  <img class="item" src="./images/motiondesign/10_2.png" alt="Project #10_2">
  <div class="name">
    <h3>sadness</h3>
      <p class="date">november 2019<p>
      <p class="description">Lorem ipsum...</p>
  </div>
</div>

并在 CSS 中将它们格式化如下（在网格内）：

.gallery-site .container .gallery .project .item{
  align-self: start;
  grid-column-start: 1;
}

.gallery-site .container .gallery .project .name {
  align-self: start;
  grid-column-start: 2;
  padding: 50px;
}

提前谢谢大家！

标签： htmlcss