这是我的代码:
我想删除的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>
1条答案
按热度按时间yshpjwxd1#
下面是你需要的代码。