I am using a grid display for the body, and in one of my grid template containers, I have a nested grid template to organize my projects. however, whenever I click on a project and it expands it doubles the spacing between the body grid container elements causing the website to double in length.

body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "text text text"
    ". picture ."
    "text text text "
    ". resume . "
    "text text text "
    "projects projects projects"
    "text  text text "
    ". text  ."
    ;
    

}

.projects{
    grid-area: projects;    
    align-items: center;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr;
    grid-template-areas:
    "project project project"
}   

Here is the Javascript Function to open the project

function openproject(){
    var text = document.getElementById("project") 
    var project = document.getElementById("project")
    var project2 = document.getElementById("project 2")
    if (text.style.display=="none"){
        text.style.display ="inline"
        project.style.backgroundColor = "hsl(49 37% 94%)"
        project.style.color ="var(--bg-color)"
        project2.style.display ="none" 
         
    }else{
        text.style.display ="none" 
        project.style.textDecoration="none"
        project.style.backgroundColor="var(--bg-color)"
        project.style.color="hsl(49 37% 94%)"
        project2.style.display ="inline" 
        
    }
}

and the HTML is essentially just variations of this

 <div class="projects">
        <div class="project" id="project" onclick="openproject()">
          Project Name! 
          <span id="projectText" class="projectText" style="display: none">
            <p>
              Text
            </p>
            <a
              href=link
              target="_blank"
              style="text-decoration: none; color: var(--bg-color)"
            >
              <strong> Check Out the Project! </strong>
            </a>
          </span>
        </div>

Thank You in advance!