当屏幕尺寸小于 1180px 时，如何使用 CSS GRID 删除 HTML 的 spcefics div？

Question

这是我的代码：

我想删除 dvs

grid-item-2

,

grid-item-4

,

grid-item-6

当我的屏幕宽度低于

1180px

.

是否可以仅使用 CSS GRID 来做到这一点？ 或者我需要使用媒体查询？

body {
    margin: 0; padding: 0;
    width: 100%;
}

#grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 10rem);
    grid-gap: 1px;
}

.grid-item {
    background: black;
}

.grid-item-2 {
    background: red;
}

.grid-item-4 {
    background: green;
}

.grid-item-6 {
    background: blue;
}

.grid-item-8 {
    background: yellow;
}

<main id="grid-wrapper">
  <div class="grid-item grid-item-1">1</div>
  <div class="grid-item grid-item-2">2</div>
  <div class="grid-item grid-item-3">3</div>
  <div class="grid-item grid-item-4">4</div>
  <div class="grid-item grid-item-5">5</div>
  <div class="grid-item grid-item-6">6</div>
  <div class="grid-item grid-item-7">7</div>
  <div class="grid-item grid-item-8">8</div>
  <div class="grid-item grid-item-9">9</div>
</main>

Answer 1

以下是您需要的代码；

@media screen and (min-width: 1180px) {
  .grid-item-2,
  .grid-item-4,
  .grid-item-6, {
    display:none;
  }
}