具有网格模板区域的媒体查询不起作用

Question

我需要编写一个简单的媒体查询，当我的屏幕宽度小于992px时将grid-template-columns从4列转换为3列。我正在使用Angular5进行开发，并且在我的SCSS样式文件中编写了此媒体查询，但是它不起作用。 此外，我尝试使用此代码https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Redefining_the_grid_using_media_queries，但仍然无法使用。.

.header-context {
  display: grid;
  grid-template-columns: 40px auto auto 40px;
  grid-template-areas:
    "back title    title   ."
    ".    subtitle actions .";
  padding: 1rem;
  margin-bottom: 0;
  z-index: 200;
  background-color: white;

  .back-action {
    grid-area: back;
    align-self: start;
    }
  }

  .title-container {
    grid-area: title;
    align-self: start;
  }

  .subtitle-container {
    grid-area: subtitle;
    align-self: start;
  }

  .actions {
    grid-area: actions;
    align-self: end;
  }
}

@media screen and (max-width: 992px) {
 .header-context {
    grid-template-columns: 32px auto auto;
    grid-template-areas:
      "back title    title  "
      ".    subtitle actions";

    .back-action {
      grid-area: back;
    }

    .title-container {
      grid-area: title;
    }

    .subtitle-container {
      grid-area: subtitle;
    }

    .actions {
      grid-area: actions;
    }
  }
}