I am working on developing a website that includes a photos page. I want to format the photos page with a grid layout similar to Instagram:
However, I'm encountering an issue where the div elements are not being displayed within their parent div as intended:
This is how my code currently appears:
.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>I would appreciate any feedback on what might be causing this issue. Thank you!