Remove CSS grid values on smaller viewports

Question

I have a CSS grid layout where I have certain grid-items spanning multiple grid tracks.

When the window gets below 1024px I'd like to change the layout.

On the example, .grid-item-5 currently spans 3 tracks, I'd like it so under 1024px this visual element starts at '.grid-item-4 and spans the entire row - which is simple enough because I'd do the following:

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

Problem:

How on earth do I turn off the intial .grid-item-5 values so they just revert back to their default (i.e so item-5 is not spanning any other grid-columns) and thus doesn't break the layout?

Many thanks,

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

The default for grid-column is auto.

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

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

Answer 2

I hope I've understood you correctly...

You could invert your media query, that is, apply the changes at a minimum screen size.

So by default .grid-row-5 assumes only 1 column, and at screen sizes above 1024px it occupies additional columns.

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: span 2;
  background: yellow;
}

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

.grid-item-4 {
  grid-column: 1 / -1;
  background: lightblue;
}

@media screen and (min-width: 1024px) {
  .grid-item-4 {
    grid-column: span 1;
    background: red;
  }
  .grid-item-5 {
    grid-column: 2 / 6;
    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>