如果屏幕大小小于1180px,如何使用CSS网格删除HTML的特定div?

xqnpmsa8  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(107)

这是我的代码:
我想删除的dvs grid-item-2grid-item-4grid-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>
yshpjwxd

yshpjwxd1#

下面是你需要的代码。

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

相关问题