Css Grid 媒体查询元素被推到外面

Question

我正在尝试学习 CSS 网格，但不断出现一些奇怪的问题。所以我正在构建一个简单的网格，其中包含 5 个区域的页眉、主页脚左侧边栏和右侧边栏。它工作正常，这是代码，但是当由于某种奇怪的原因调整大小时，右侧的边栏出现在右侧的网格下方，这也是我的代码笔 https://codepen.io/yuri-gaiduk/pen/xxOOOda。只是为了在应用媒体查询后澄清一下，我只想看到 Header、Midlle 和 Footer

<div class="container">
   <div class="red_box left-bar box"><h2>On left</h2></div>
   <div class="green_box header box">Heade</div>
   <div class="orange_box rigth-bar box"><h2>On right</h2></div>
   <div class="coral_box main box">Main</div>
   <div class="blue_box bottom box"><h2>Footer</h2></div> 
</div>

这里是css

.container{
           display:grid;
           grid-template-columns:auto;
           grid-template-rows:auto;
           grid-template-areas: 
                              "leftbar header header header rightbar"
                              "leftbar midle midle midle rightbar"
                              "leftbar midle midle midle rightbar"
                              "leftbar midle midle midle rightbar"
                              "leftbar midle midle midle rightbar"
                              "leftbar midle midle midle rightbar"
                              "footer footer footer footer footer";
           height:400px;
       }


      .box{
          border:1px solid black;
          width:100%;
          height:100%;
          text-align:center;
      }


     .rigth-bar{
          grid-area:rightbar;
     }

     .left-bar{
          grid-area:leftbar;
     }

    .header{
          grid-area:header;
    }

    .main{
          grid-area:midle;
    }

    .bottom{
          grid-area:footer;
    }

    .red_box{
          background-color:red;
    }

    .orange_box{
          background-color:orange;
    }


   .blue_box{
         background-color:blue;
    }

   .green_box{
         background-color:green;
   }

   .coral_box{
         border:1px solid black;
         background-color:coral;
         width:100%;
         height:100%;
         text-align:center;
   }

  @media (max-width:1000px){
      .container{
          grid-template-areas:
                             "header header header"
                             "midle midle midle"
                             "midle midle midle"
                             "midle midle midle"
                             "midle midle midle"
                             "midle midle midle"
                             "footer footer footer";
       }

  }

Answer 1

将leftbar 和rightbar 留在grid-template-areas 之外不会从DOM 中删除这些元素，只会将它们从网格中删除。当您的媒体查询处于活动状态时（这就是您看不到它的原因），您的左栏实际上直接在您的右栏之后。

您还需要在它们上设置display: none：

.left-bar, .rigth-bar{
  display: none;
}

这是您的代码笔中的一个示例 sn-p：

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "leftbar header header header rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "footer footer footer footer footer";
  height: 400px;
}

.box {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  text-align: center;
}

.rigth-bar {
  grid-area: rightbar;
}

.left-bar {
  grid-area: leftbar;
}

.header {
  grid-area: header;
}

.main {
  grid-area: midle;
}

.bottom {
  grid-area: footer;
}

.red_box {
  background-color: red;
}

.orange_box {
  background-color: orange;
}

.blue_box {
  background-color: blue;
}

.green_box {
  background-color: green;
}

.coral_box {
  border: 1px solid black;
  background-color: coral;
  width: 100%;
  height: 100%;
  text-align: center;
}

@media (max-width:1000px) {
  .container {
    grid-template-areas: "header header header" "midle midle midle" "midle midle midle" "midle midle midle" "midle midle midle" "midle midle midle" "footer footer footer";
  }
  .left-bar,
  .rigth-bar {
    display: none;
  }
}

<div class="container">
  <div class="red_box left-bar box">
    <h2>On left</h2>
  </div>
  <div class="green_box header box">Heade</div>
  <div class="orange_box rigth-bar box">
    <h2>On right</h2>
  </div>
  <div class="coral_box main box">Main</div>
  <div class="blue_box bottom box">
    <h2>Footer</h2>
  </div>
</div>