div不在网格里

Question

我想创建一个带有照片页面的网站。在照片页面中，我希望像Instagram一样具有一排图片：

但这不起作用，它以“标题”页面上的div结尾，而不是其父div所在的位置：

我的代码如下：

.PhotosPage{
  width: 100vw;
  height: 100vh;
  display: flex;
}

.Photos_Container{
  display: grid;
  width: 100vw;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;

}

.Photos{
  width: 200px;
  height: 200px;
  background-color: #000;
}

<div className="PhotosPage">
  <div className="Photos_Container">
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
    <div className="Photo"></div>
  </div>
</div>

你能告诉我哪里出问题了吗？

Answer 1

.Photos应该是.Photo

.PhotosPage{
  width: 100vw;
  height: 100vh;
  display: flex;
}

.Photos_Container{
  display: grid;
  grid-gap: 10px;
  width: 100vw;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;

}

.Photo{
  width: 200px;
  height: 200px;
  background-color: #000;
}

<div class="PhotosPage">
  <div class="Photos_Container">
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
    <div class="Photo"></div>
  </div>
</div>