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>