为什么我的网格侧边栏不会在我的主要区域旁边显示内容？

Question

我的桌面@media查询中有一个侧边栏，仅在该媒体查询中使用。

当我为该@media查询扩展视口时，它显示得很好，并且主区域为侧边栏腾出了空间。

但是，侧边栏仅在我的广告旁边显示内容，而不在我的主要区域旁边显示内容。只是空白，好像已为边栏分配了空间，但无法使用。

我在这里想念什么？

我尝试了许多网格区域模板的组合。没有运气。

HTML：

  <div class="container">
    <header> Some Anchors </header>
    <advert class="bg-righttoleft"></advert> 
    <main> LOTS OF CONTENT </main>
    <sidebar> A background-image in CSS </sidebar>
    <footer>Maximilian Crosby ©</footer>
  </div>

CSS：

.container  { /* Mobile */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

@media only screen /* Tablet */
  and (min-width: 885px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }
  }

@media only screen /* Big Tablet */
  and (min-width: 1170px) {
    .column-text  {
      min-height: 260px;
      padding: 20px 0 0 0;
    }
  }

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
    max-width: 2500px;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px 340px 1fr 50px;
    grid-template-areas:
      "header header"
      "sidebar advert"
      "sidebar main"
      "footer footer";
    }

    sidebar  {
      background: url(./history-vr-banner.jpg);
    }
  }

我希望侧边栏内容会占用广告和主要区域旁边的全部空间。

目前仅覆盖广告旁边的区域。注意：由于主区域已将其自身移至视口的右侧，因此在主区域旁边的侧边栏已分配了空间。

Answer 1

我认为我找到了问题。您的容器类将所有内容（包括图像）置于文本中心。从容器中删除文本中心，它应该可以工作。