您如何使用媒体查询器从显示网格中隐藏一列，并在剩余的列中调整间距？

Question

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

我想做的是结合CSS网格和媒体查询，以便当视口达到一定大小时，第二列不再显示。校验。这部分完成了。我不太清楚如何完成的部分是：

我希望我告诉我的文本居中对齐，以便在删除另一列后在整个行中居中对齐。按目前的样子，它保留了存在另一列时的位置。

列2的高度也固定，但是当用媒体查询隐藏该列时，其余列的高度现在较小。它甚至还不够高，无法容纳所有原始内容。通过为两个列分配相同的显式高度或最小高度，我可以部分解决此问题，但是奇怪的是，当我这样做时，列的垂直对齐不再居中并移至容器的顶部。

/* - Code Requested by Commenter - */
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1.7;
}

h1 {font-family: "Roboto Condensed", sans-serif}

h2 {font-family: "Roboto", sans-serif}

body,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}

.pagecontainer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.nav-container {
    width: 100%
    height: 70px;
    z-index: 9999;
}

.navbar {
    width: 100%;
    height: 100%;
    line-height: 72px;
    z-index: 9999;
    margin: auto;
    top: 0;
    padding: 0 16px 0 0;
    overflow: hidden;
    background-color: #fff!important;
    box-sizing: border-box;
    font-size: 17px;
}

.navbar a {
    color: #777;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #bbb;
    color: #fff;
}

.nav-right {
    float: right!important;
}

.navlogo {
    width: auto;
    height: 72px;
    padding: 0;
    vertical-align: middle;
}

.navbar .navbar-item {
    padding: 0 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
}

.navbar-block .navbar-item {
    width: 100%;
    display: block;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}

/* common styles used throughout */
.center-text {
    text-align: center;
}

.big-text {
    font-size: 20px!important;
}

.huge-text {
    font-size: 64px!important;
}

/* Full height header */
.header {
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(to top right, rgba(0, 0, 45, .92), rgba(45, 0, 0, 0.66)), url("../images/headerImage.jpg");
    min-height: 90vh;
}

.header-display-left {
    position: absolute;
    top:50%;
    left:0%;
    padding: 50px;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%)
}

.header-white-text {
    color: #fff;
}

.h1-header {
    font-size: 36px;
    line-height: 0.2;
}

.h2-header {
    font-size: 28px;
}

.header-description {
    max-width: 584px;
    font-size: 14px;
    line-height: 1.9;
}

.header-description a {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    background-color:rgba(205, 0, 0, .6);
    padding: 10px 25px;
    border-radius: 11px;
}

.header-description a:hover {
    background-color:rgb(205, 0, 0);
    padding: 10px 25px;
    border-radius: 11px;
}

.header-display-bottomleft {
    position:absolute;
    left:0;
    bottom:0;
}

.header-fa {
    font-size:20px!important;
    color: #888!important;
    padding: 0px 0px 48px 48px;
}

.header-fa a {
    font-size:20px!important;
    color: #888!important;
    padding: 0px 0px 48px 0;
}

.fa-hover:hover {
    color: #eee;
}

.fa-hover a:hover {
    color: #eee;
}

.about-container {
    padding: 80px 40px;
}

/* row stylings */

.max-4-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 28px;
    padding: 0 8px;
    align-items: center;
  }

/* - All Code Above Requested by Commenter - */
.split-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0px;
    align-items: center;
    background-color: #420000;
    height: 460px;
}

.leftsplit {
    color: #fff!important;
    margin: auto;
    align-items: center;
    position: relative;
    height: 100%;
}

.rightsplit {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../images/berries.jpg");
    height: 100%;
    position: relative;
}

.services-text {
    text-shadow: 2px 1px 2px rgba(255, 255, 0, 0.8);
    font-size: 42px;
    font-weight: 800;
}
  
/* - Requested Media Queries - */
/* Media Queries */
@media (max-width: 960px) {
    .hide-mobile {
        display: none!important;
    }
}

@media (min-width: 960px) {
    .hide-desktop {
        display: none!important;
    }
}

@media (max-width: 700px) {
    .rightsplit {
        display: none!important;
    }

    .split-container {
        grid-template-columns: 1fr;
    }
}

<div class="split-container" id="services">
      <div class="column leftsplit center-text">
        <h2 class="services-text">Our Services</h2>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 1</p>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 2</p>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 3</p>
      </div>
      <div class="column rightsplit"></div>
  </div>

See What Happens When I Resize Here

Answer 1

同时隐藏右列，您应该重置网格，以便剩余的列占据整行。

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

Answer 2

媒体查询已通过按@Mahatmasamatman的建议通过重置.split-container来解决。通过为网格容器“ .split-container”分配显式高度，然后为我的左列div（.leftsplit）设置140px的高度，边距为0并相对定位，从而解决了垂直间距问题。然后，我将.services文本放到auto的空白处，底边的底边为-5px。最后，我将.services-description的边距设置为auto。这是很多工作，但我想我实现了我的追求。

.split-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0px;
    align-items: center;
    background-color: #420000;
    height: 460px;
    text-align: center;
}

.leftsplit {
    color: #fff!important;
    margin: auto;
    align-items: center;
    position: relative; 
    height: 140px;
    display: grid;
}

.rightsplit {
    background-size: cover;
    background-position: center;
    background-image: url("../images/berries.jpg");
    height: 100%;
}

.services-text {
    font-size: 42px;
    margin: auto;
    margin-bottom: -5px;
}

.services-description {
    margin: auto;
}

/* Media Query */
@media (max-width: 700px) {
    .rightsplit {
        display: none!important;
    }

    .split-container {
        grid-template-columns: 1fr;
    }
}

<div class="split-container" id="services">
      <div class="column leftsplit center-text">
        <h2 class="services-text">Our Services</h2>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 1</p>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 2</p>
        <p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 3</p>
      </div>
      <div class="column rightsplit"></div>
  </div>