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

你能告诉我有什么问题吗？

标签： cssreactjsflexboxcss-grid

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>