Css网格媒体查询元素被推到外部

我正在努力学习CSS网格，但一些奇怪的问题不断出现。因此，我正在构建一个包含5个区域的简单网格：页眉、主页脚左侧边栏和右侧边栏。它工作得很好，下面是代码，但是当出于某种奇怪的原因调整大小时，右边的边栏出现在右边的网格下面，这里也是我的代码笔。在应用媒体查询后，我只想查看页眉、中间部分和页脚

<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>

---

将

leftbar

和

rightbar

从

网格模板区域中移除不会将这些元素从DOM中移除，只会将它们从网格中移除。当媒体查询处于活动状态时，左栏实际上就在右栏的正后方（这就是为什么您看不到它的原因）

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

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

下面是代码笔中的一个示例片段：


.container{
显示：网格；
网格模板列：自动；
网格模板行：自动；
网格模板区域：“leftbar页眉页眉righbar”“leftbar midle midle midle righbar”“leftbar midle midle midle midle righbar”“leftbar midle midle midle midle rightbar”“leftbar midle midle midle rightbar”“footer footer footer footer footer footer”；
高度：400px；
}
.盒子{
边框：1px纯黑；
宽度：100%；
身高：100%；
文本对齐：居中；
}
.rigth酒吧{
网格区域：右栏；
}
.左栏{
网格区域：左栏；
}
.标题{
网格区域：标题；
}
梅因先生{
网格区域：中部；
}
.底部{
网格区域：页脚；
}
.红盒子{
背景色：红色；
}
.橙色的盒子{
背景颜色：橙色；
}
.蓝盒子{
背景颜色：蓝色；
}
.绿盒子{
背景颜色：绿色；
}
.珊瑚箱{
边框：1px纯黑；
背景颜色：珊瑚；
宽度：100%；
身高：100%；
文本对齐：居中；
}
@介质（最大宽度：1000px）{
.集装箱{
网格模板区域：“页眉页眉”“中中中中中”“中中中中中”“中中中中中”“中中中中中”“中中中中中中”“中中中中中”“页脚页脚”；
}
.左栏，
.rigth酒吧{
显示：无；
}
}

在左边
海德
在右边
主要
页脚
媒体查询处于活动状态时的预期行为是什么？对不起，我应该澄清一下。我希望网格只显示页眉、中间和页脚，而不显示侧边栏
.left-bar, .rigth-bar{
  display: none;
}