不确定如何更改CSS网格的行为

编辑：由于请求，我上传了我网站的代码片段：

const logo=document.querySelector（“.logo link img”），
myNav=document.querySelector（“.main navbar”），
navigationToggler=document.querySelector（“.nav toggler”），
dropShadow=document.querySelector（#dropShadow”），
hamburgerBtn=document.querySelector（“.hamburger”）；
window.onscroll=已滚动；
函数滚动（）{
if（（document.body.scrollTop>=10 | | document.documentElement.scrollTop>=10））{
logo.src=“../imgs/logo/logo lightgrey.png”；
myNav.classList.add（“滚动”）；
}else if（hamburgerBtn.className.includes（“处于活动状态”）==0）{
logo.src=“../imgs/logo/logo black.png”；
myNav.classList.remove（“滚动”）；
}
};
hamburgerBtn.addEventListener（'click'，hamburgerToggled）；
函数hamburgerToggled（）{
if（hamburgerBtn.className.includes（“处于活动状态”）！=0）{
myNav.classList.remove（“导航栏覆盖”）；
dropShadow.classList.remove（“dropShadow”）；
dropshadow.style.display=“无”；
hamburgerBtn.classList.remove（“处于活动状态”）；
滚动（）；
}否则{
添加（“导航栏覆盖”）；
dropShadow.classList.add（“dropShadow”）；
dropshadow.style.display=“block”；
hamburgerBtn.classList.add（“处于活动状态”）；
logo.src=“../imgs/logo/logo lightgrey.png”；
}
}

正文{
字体系列：“Roboto”，无衬线；
背景图片：url（“../imgs/general bg/微妙模式.png”）；
保证金：0；
显示：网格；
网格模板行：4rem 25rem auto 4rem；
网格模板区域：“页眉”“英雄部分”“主要内容”“页脚”；
最小高度：100vh；
证明内容：中心；
}
.关于我们的英雄节{
网格区域：英雄区；
背景图片：url(https://serving.photos.photobox.com/68808029c7b0524783bf789e026f6ff67adc1cd6c7e8c75c22b01f97caf5a1b264747b1f.jpg);
背景尺寸：封面；
背景位置：8%；
背景重复：无重复；
宽度：100%；
身高：29雷姆；
位置：绝对位置；
z指数：1；
}
.about-us\uuuu hero-info{
位置：绝对位置；
左：10%；
最高：17%；
字号：1.2rem；
}
.about-us\uuuu hero-info h1{
边缘底部：0.5雷姆；
}
.about-us\uuuu hero-info p{
边际上限：0；
最大宽度：50%；
}
.主导航栏{
排名：0；
网格区域：标题；
}
main.about-content{
垫面：2rem；
垫底：2rem；
显示：网格；
证明项目：中心；
网格模板列：重复（12,7%）；
网格模板区域：“A A A B B B B”“C C C D D D”“E E E E E F F F F F”“G G G H H H H”；
柱间距：1%；
网格区域：主要内容；
最大宽度：1392px；
}
.雇员容器p{
边际上限：0；
}
.雇员货柜h4{
页边距底部：0；
}
.员工img容器{
宽度：100%；
位置：相对位置；
}
.gif图像{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
显示：无；
对象匹配：覆盖；
边界半径：10px；
}
.employee容器：hover.gif图像{
显示：块；
}
.员工容器：悬停{
边框：1px虚线#60b0e2；
边界半径：10px；
}
.员工容器{
宽度：100%；
身高：100%；
填充：0.5雷姆；
填充底部：0；
}
.员工信息{
显示：网格；
证明项目：中心；
位置：相对位置；
边界半径：10px；
}
.员工信息.员工img{
宽度：100%；
对象匹配：包含；
边界半径：10px；
对象位置：50%0；
过渡时间：1000ms；
}
.主页脚{
网格区域：页脚；
}
.卷轴{
背景色：#211d1c；
}
.卷轴.汉堡内胆，
.scroll.hamburger-inner：：之前，
.scroll.hamburger内部：：之后{
背景：#d1c9c3；
}
/*雇员*/
.雇员1{
网格面积：A；
}
.雇员2{
网格面积：B；
}
.雇员3{
网格面积：C；
}
.雇员4{
网格面积：D；
}
.雇员5{
网格面积：E；
}
.雇员6{
网格面积：F；
}
.雇员7{
网格面积：G；
}
.雇员8{
网格面积：H；
}
/*雇员*/
@介质（最小宽度：46rem）{
main.about-content{
网格模板区域：“A A A B B C C C”“D D D E E F F”“G G H H….”；
柱间距：1%；
}
}
@介质（最小宽度：60rem）{
main.about-content{
网格模板区域：“A A B B C C D D D”“E E E F G H”
}
}
/*来自SHARED.CSS的所有CSS代码*/
@导入url（'https://fonts.googleapis.com/css2?family=Alegreya:wght@400；500；800&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@400；500&display=swap'）；
* {
框大小：边框框；
}
html{
位置：相对位置；
滚动行为：平滑；
}
.投下阴影{
背景图片：url（imgs/general bg/dark_symption.png）；
位置：固定；
宽度：100%；
高度：100vh；
z指数：2；
}
#阴影{
显示：无；
}
#投影导航{
位置：固定；
排名前10%；
z指数：3；
}
.移动导航列表{
列表样式：无；
填充：0；
位置：固定；
顶部：6rem；
左：2.3rem；
}
.移动导航项目a{
文字装饰：无；
显示：块；
颜色：#d1c9c3；
字体大小：1.5rem；
边缘底部：1rem；
字号：500；
光标：指针；
}
.移动导航a项：悬停，
.移动导航项目a：激活{
颜色：白色；
}
.移动导航主项a：悬停，
.移动导航主项目a：激活{
颜色：白色；
边框颜色：白色；
}
.移动导航主项目a{
文字装饰：无；
位置：固定；
左：2.1rem；
显示：块；
颜色：#d1c9c3；
字体大小：1.5rem；
字号：500；
光标：指针；
边框：1px实心#d1c9c3；
边界半径：0.4rem；
填充：0.2rem 0.3rem；
}
.资产净值项目a{
文字装饰：无；
颜色：#d1c9c3；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.主导航栏{
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：4rem；
宽度：100%；
字号：500；
过渡时间：500ms；
z指数：100；
}
/*                       */
/*汉堡图标如下*/
.汉堡包{
位置：绝对位置；
顶部：1.2rem；
左：1.1rem；
宽度：3rem；
填充：0