Why does display: none or block; remove the grid function in my CSS?

My CSS has codes that adds both background but also grid for the placement of each section: projects and my-passion, skills, etc. When I click on "About me" and likewise "Home" nav bar, the grid disappears so the structure of the <p> is all vertical. I don't want to make separate website and then hyperlink them because that would take away the point of learning. (Sorry about my code being sloppy since I learned how to code in HTML, CSS, and JS about a month ago)

CSS

#home {
    display: grid;
    grid-gap: 15px; 
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;

    .self-img img {
        height: 600px;
        width: 500px;
        grid-row-start: 1;
        grid-row-end: 16;
        grid-column-start: 1;
        grid-column-end: 8;
    }
       
    .intro {
        position: relative;
        right: 15px;
        bottom: -10px;
        /* padding-top: 10px; */
        padding-left: 25px;
        padding-right: 25px;
        background-color: #ed0099;
        font-size: 17px;
        border-radius: 10px;
        grid-row: 1 / 7;
        grid-column: 7 / 14;
        line-height: 2; 
        margin: 0;
       
       }
    
    .my-skills {   
        position: relative;
        bottom: -10px;
        right: 15px; 
        font-size: 20px;
        padding: 15px;
        background-color: #ff0000;
        border-radius: 10px;
        grid-row: 1 / 7;
        grid-column: 14 / 18;
        line-height: 35px; 
        }
     
    .my-passion {
        position: relative;
        right: 25px;
        padding: 15px;
        background-color: #0cff2d;
        font-size: 15px;
        border-radius: 10px;      
        grid-row: 7 / 14;
        grid-column: 7 / 13;
        line-height: 2; 
        }
    
    .my-goal {
        padding: 15px;
        position: relative;
        right: 25px;
        background-color: #ff00f7;
        border-radius: 10px;
        font-size: 17px;
        grid-row: 7 / 13;
        grid-column: 13/ 18;
        line-height: 2;
        }


    }
    
#about-me {
    display: grid;
    grid-gap: 15px;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto auto;
.about {
    background-color: orange;
    padding: 15px;
    border: darkorange solid 7px;
    border-radius: 10px;
}
.JPMC {
    background-color: rgb(0, 85, 255);
    padding: 15px;
    border: darkblue solid 7px;
    border-radius: 10px;
#JPMC-button {
    background-color: #0cff2d;
    display: flex;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    width: 100px;
    font-weight: bold;
    display: inline-block;
}
}
.p2 {
    background-color: rgb(163, 235, 28);
    padding: 15px;
    border: gold solid 7px;
    border-radius: 10px;
}
.p3 {
    background-color: rgb(98, 230, 22);
    padding: 15px;
    border: rgb(7, 121, 7) solid 7px;
    border-radius: 10px;
}
.p4 {
    background-color: rgb(238, 90, 171);
    padding: 15px;
    border: magenta solid 7px;
    border-radius: 10px;
}
.p5 {
    background-color: rgb(235, 56, 94);
    padding: 15px;
    border: rgb(255, 12, 12) solid 7px;
    border-radius: 10px;
}
} 
    

JavaScript

let aboutMe = document.getElementById('about-me');
let aboutMeClick = document.getElementById('about_me');
let home = document.getElementById('home');
let homeClick =document.getElementById('home_');

aboutMeClick.onclick = function(event) {
    event.preventDefault();
    home.style.display = "none";
    aboutMe.style.display = "block";

}

homeClick.onclick = function(event) {
    event.preventDefault();
    home.style.display = "block";
    aboutMe.style.display = "none";
}

I tried visibility but that didn't help because it literally made each part invisible. I also tried splitting my CSS sheet into 2 sheets and with each onclick it will switch between the two stylesheet but that only changed the color and not actually remove the <div></div>, <p></p> and <h> for that part.

There are various things that you should change in your code.

But regarding your grid problem:

.style.display = "block" does not mean to make it visible; it means to make its display type block which indeed displays the element, but also overwrites the grid that you have set in your CSS with block.

You, however want to set it to grid or remove it again entirely.

So it has to be:

aboutMeClick.onclick = function(event) {
event.preventDefault();
home.style.display = "none";
aboutMe.style.display = "";
}
homeClick.onclick = function(event) {
event.preventDefault();
home.style.display = "";
aboutMe.style.display = "none";
}

grid is one of display types - you shouldn't expect that block as different display type will work with grid related CSS settings. I recommend to remove display: block and just use display: grid or display: flex (if you would need to resign from using grid), or setting related to former settings (inline-grid or inline-flex). Of course i mean you should only use these settings, if you need to create container, which holds more than one HTML element inside.