html - 如何在 CSS 网格中使用 @media 隐藏 div

Question

我有以下代码：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.3em;
}

.a1 {
  grid-column: 1/4;
  background-color: #B8336A;
}

.a2 {
  grid-row: 2/4;
  background-color: #726DA8;
}

.a3 {
  background-color: #7C8CC4;
}

.a4 {
  background-color: #9FD2DB;
}

.a5 {
  grid-column: 2/4;
  background-color: #C490D2;
}

.a6 {
  grid-column: 1/3;
  background-color: #B8336A;
}

.a7 {
  grid-column: 3/4;
  background-color: #726DA8;
}

.a8 {
  grid-column: 1/4;
  background-color: #726DA8;
}

@media (max-width: 1200px) {
  .a8 {
    display: none;
  }
}

<div class="wrapper">
  <div class="a1">1</div>
  <div class="a2">2</div>
  <div class="a3">3</div>
  <div class="a4">4</div>
  <div class="a5">5</div>
  <div class="a6">6</div>
  <div class="a7">7</div>
  <div class="a8">8</div>
</div>

当使用@media 最大宽度为 1200px 时，我需要使用类“a8”隐藏 div，我尝试使用 display: none，但它不起作用，我也尝试了 visibility: hidden 但它不是什么我需要。我该做什么？谢谢你的帮助

标签： htmlcsscss-grid