I'm currently working on my Portfolio application, but I'm facing an issue on the home page where the grid layout is not functioning properly. The different div tags are overlapping each other instead of displaying correctly.
https://i.sstatic.net/6ilnY.png
Oddly enough, the grid works perfectly on my portfolio page.
Code:-
JS Part
function HomePG(){
return(
<div className="homePGMain">
<div className="BGpant">
<div className="TopHead">
<h1>
Hi There,<br/>
Sukarna Jana<br/>
/* kept repeating */
...
...
</h1>
</div>
</div>
<div className="demo">
<h1>
Hi There,<br/>
Sukarna Jana<br/>
/* kept repeating */
...
...
</h1>
</div>
</div>
)
}
CSS Part
*{
margin: 0;
padding: 0;
}
.homePGMain{
display:grid;
grid-template-rows: auto;
grid-row-gap: 45px;
width: 100%;
height: 100%;
justify-items: center;
justify-content: center;
align-items: center;
justify-self: center;
}
.BGpant{
display:grid;
display: flex;
background-image: linear-gradient(to right, rgb(0, 255, 255) , rgb(71, 38, 255));
width: 100%;
position: absolute;
justify-items: center;
justify-content: center;
}
// ... ///
.demo{
display:grid;
position: absolute;
display: grid;
}
The complete code is available on Github