Estoy usando una pantalla de cuadrícula para el cuerpo y en uno de mis contenedores de plantilla de cuadrícula, tengo una plantilla de cuadrícula anidada para organizar mis proyectos. sin embargo, cada vez que hago clic en un proyecto y se expande, se duplica el espacio entre los elementos del contenedor de la cuadrícula del cuerpo, lo que hace que el sitio web se duplique en longitud.

 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" }

Aquí está la función Javascript para abrir el proyecto.

 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" } }

y el HTML es esencialmente solo variaciones de este

 <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>

¡Gracias de antemano!