Html 如何使用Media Queria从显示网格中隐藏列并调整保留列的间距？

我第一次使用CSS网格，对它们的功能感到惊讶。我特别喜欢fr单元。然而，我遇到了一个让我感到不适的问题

我想做的是结合CSS网格和媒体查询，这样当视口达到一定大小时，第二列就不再显示。检查。那部分已经完成了。然而，我不太清楚如何完成的部分是：

我希望我告诉过的要居中对齐的文本在删除另一列后跨行居中对齐。现在，它保持着它在另一个纵队出现时的位置

第2列也有固定的高度，但当使用media query隐藏该列时，其余列的高度现在变小了。它甚至不够高，无法容纳所有的原始内容。我可以通过为两列指定相同的显式高度或最小高度来部分修复此问题，但奇怪的是，当我这样做时，列的垂直对齐不再居中，而是移动到容器顶部

/*-注释者请求的代码-*/
正文，html{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
线高：1.7；
}
h1{字体系列：“Roboto压缩”，无衬线}
h2{字体系列：“Roboto”，无衬线}
正文，h3，h4，h5，h6{字体系列：“蒙特塞拉特”，无衬线}
.pagecontainer{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
填充：0；
}
.导航集装箱{
宽度：100%
高度：70像素；
z指数：9999；
}
navbar先生{
宽度：100%；
身高：100%；
线高：72px；
z指数：9999；
保证金：自动；
排名：0；
填充：0 16px 0 0；
溢出：隐藏；
背景色：#fff！重要；
框大小：边框框；
字号：17px；
}
纳瓦尔先生{
颜色：#777；
文字装饰：无；
}
.导航栏a:悬停{
背景色：#bbb；
颜色：#fff；
}
.导航权{
浮子：对！很重要；
}
.导航标志{
宽度：自动；
高度：72px；
填充：0；
垂直对齐：中间对齐；
}
.navbar.navbar项{
填充：0 16px；
浮动：左；
宽度：自动；
边界：无；
显示：块；
大纲：0；
}
.导航栏块.导航栏项{
宽度：100%；
显示：块；
文本对齐：左对齐；
边界：无；
空白：正常；
浮动：无；
大纲：0；
}
/*通篇使用的常用样式*/
.居中文本{
文本对齐：居中；
}
.大文本{
字体大小：20px！重要；
}
.巨大的文本{
字体大小：64px！重要；
}
/*全高割台*/
.标题{
背景位置：中心；
背景尺寸：封面；
背景图像：线性渐变（右上角，rgba（0,0,45,92），rgba（45,0,0,0.66）），url（“../images/headerImage.jpg”）；
最小高度：90vh；
}
.标题显示左侧{
位置：绝对位置；
最高：50%；
左：0%；
填充：50px；
转换：翻译（0%，-50%）；
-ms转换：转换（-0%，-50%）
}
.标题白色文本{
颜色：#fff；
}
.h1标题{
字体大小：36px；
线高：0.2；
}
.h2标题{
字号：28px；
}
.标题说明{
最大宽度：584px；
字体大小：14px；
线高：1.9；
}
.标题说明a{
字体大小：16px；
颜色：#fff；
文字装饰：无；
背景色：rgba（205,0,0,6）；
填充：10px 25px；
边界半径：11px；
}
.标题说明a：悬停{
背景色：rgb（205,0,0）；
填充：10px 25px；
边界半径：11px；
}
.标题显示左下角{
位置：绝对位置；
左：0；
底部：0；
}
.标题fa{
字体大小：20px！重要；
颜色：#888！重要；
填充：0px 0px 48px 48px；
}
.标题fa a{
字体大小：20px！重要；
颜色：#888！重要；
填充：0px 0px 48px 0；
}
.fa悬停：悬停{
颜色：#eee；
}
.fa hover a:悬停{
颜色：#eee；
}
.关于集装箱{
填充：80px 40px；
}
/*行样式*/
.max-4-cols{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
栅柱间隙：28px；
填充：0 8px；
对齐项目：居中；
}
/*-评论员要求的上述所有代码-*/
.分体式集装箱{
显示：网格；
网格模板列：重复（2，1fr）；
栅柱间隙：0px；
对齐项目：居中；
背景色：#420000；
高度：460px；
}
.leftsplit{
颜色：#fff！重要；
保证金：自动；
对齐项目：居中；
位置：相对位置；
身高：100%；
}
.rightsplit{
背景尺寸：封面；
背景位置：中心；
背景图像：线性渐变（右上角，rgba（0,0,0,0.8），rgba（0,0,0,0.5）），url（“../images/berries.jpg”）；
身高：100%；
位置：相对位置；
}
.服务文本{
文本阴影：2px1px2pRGBA（255,255,0,0.8）；
字体大小：42px；
字号：800；
}
/*-要求的媒体查询-*/
/*媒体查询*/
@介质（最大宽度：960像素）{
.隐藏手机{
显示：无！重要；
}
}
@介质（最小宽度：960像素）{
.隐藏桌面{
显示：无！重要；
}
}
@介质（最大宽度：700px）{
.rightsplit{
显示：无！重要；
}
.分体式集装箱{
网格模板列：1fr；
}
}

我们的服务
服务1
服务2
服务3

在隐藏右侧列的同时，应重置网格，使其余列占据整行

@media (max-width: 700px) {
    .rightsplit {
        display: none!important;
    }
    .split-container{
       grid-template-columns: repeat(1, 1fr);
    }
}

---

媒体查询已通过重置解决。按照@Mahatmasamatman的建议拆分容器。通过给网格容器“.split container”指定一个显式高度，然后给我的左列div（.leftsplit）一个140px的高度，边距为0，相对位置为