点击项目时CSS Grid间距异常增大问题求助

看起来你遇到的问题是因为body容器的Grid行高设置（全部用1fr）和动态内容展开时的布局重排冲突导致的，下面是具体的分析和修复方案：

核心问题分析 #

你给body设置的grid-template-rows: 1fr 1fr ...是把页面高度强制平均分成了7份，每份占1fr。当你展开项目内容时，projects所在行的高度会突然增加，浏览器重新计算Grid布局时，可能错误地将其他行的1fr也同步拉伸，再加上嵌套Grid的行高设置（2fr）的叠加影响，最终导致整个页面高度翻倍。另外你的JS代码里还有一些小问题（比如ID包含空格），也可能间接干扰布局表现。

具体修复步骤 #

1. 调整body的Grid行高设置 #

把body的grid-template-rows从全部1fr改成auto，让每一行的高度自适应自身内容，而不是强制平分页面高度：

body{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 /* 用auto代替1fr，行高随内容动态变化 */
 grid-template-rows: auto auto auto auto auto auto auto;
 grid-template-areas: 
   "text text text" 
   ". picture ." 
   "text text text " 
   ". resume . " 
   "text text text " 
   "projects projects projects" 
   "text text text " 
   ". text ." ;
 /* 明确设置网格间距，避免默认间距的异常波动 */
 gap: 1.5rem;
}

2. 优化projects的嵌套Grid布局 #

projects里的grid-template-rows: 2fr 2fr 2fr是多余的（你只定义了一个project区域），改成auto让行高自适应内容：

.projects{
 grid-area: projects;
 align-items: center;
 display: grid;
 grid-template-columns: 2fr 2fr 2fr;
 grid-template-rows: auto; /* 自适应内容高度 */
 grid-template-areas: "project project project";
 gap: 1rem; /* 给项目之间添加明确间距 */
}

3. 修复JavaScript代码的错误 #

• ID里不能包含空格，把"project 2"改成"project2"
• 合并重复获取元素的代码，同时用block代替inline来显示包含块级元素的内容（比如里面的<p>标签）：

function openproject(){
 const project = document.getElementById("project");
 const projectText = document.getElementById("projectText");
 // 修正ID：去掉空格
 const project2 = document.getElementById("project2");

 if (projectText.style.display === "none"){
   projectText.style.display = "block"; // 用block更适合包含p标签的内容
   project.style.backgroundColor = "hsl(49 37% 94%)";
   project.style.color = "var(--bg-color)";
   // 先判断元素是否存在再操作，避免控制台报错
   if(project2) project2.style.display = "none";
 } else {
   projectText.style.display = "none";
   project.style.textDecoration = "none";
   project.style.backgroundColor = "var(--bg-color)";
   project.style.color = "hsl(49 37% 94%)";
   if(project2) project2.style.display = "block";
 }
}

4. 修正HTML结构的小问题 #

projectText用<span>不合适（因为里面包含块级元素<p>），改成<div>：

<div class="projects">
 <div class="project" id="project" onclick="openproject()">
   Project Name!
   <div 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>
   </div>
 </div>
</div>

这些修改应该能解决你遇到的页面高度翻倍问题，核心是让Grid行高自适应内容，而不是强制平分空间，同时修复代码里的小错误避免意外的布局影响。

内容的提问来源于stack exchange，提问作者CodeKage