html - 删除较小视口(viewport)上的 CSS 网格值

Question

我有一个 CSS 网格布局，其中某些网格项跨越多个网格轨道。

当窗口低于 1024 像素时，我想更改布局。

在示例中，.grid-item-5 目前跨越 3 个轨道，我希望它低于 1024px，此视觉元素从 '.grid-item-4 开始并跨越整行- 这很简单，因为我会执行以下操作:

@media screen
and (max-width: 1024px) {
    .grid-item-4 {
        grid-column: 1 / 8;
        background: lightblue;
    } 
}

问题:

我究竟如何关闭初始 .grid-item-5 值，以便它们恢复到默认值(即 item-5 不跨越任何其他网格列)和这样不会破坏布局？

非常感谢，

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: red;
}

.grid-item-1 {
  grid-column: 1 / 3;
  background: yellow;
}

.grid-item-3 {
  grid-column: 4 / 8;
  background: yellow;
}

*-- I NEED TO DITCH THIS ON SMALL SCREENS --*

.grid-item-5 {
  grid-column: 2 / 6;
  background: lightblue;
}

*-- THIS IS THEN ADDED --*

@media screen
and (max-width: 1024px) {
  .grid-item-4 {
    grid-column: 1 / 8;
    background: lightblue;
  } 
}

<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

default grid-column 是 auto。

.grid-item-5 {
  grid-column: 2 / 6;
  background: lightblue;
}

@media screen
and (max-width: 1024px) {
  .grid-item-5 {
    grid-column: auto;
  }
}