Удалите значения сетки CSS на маленьких окнах просмотра

Question

У меня есть CSS-макет сетки, где у меня есть определенные элементы сетки, охватывающие несколько треков сетки.

Когда окно становится меньше 1024px, я хотел бы изменить макет.

На примере .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, чтобы они просто вернулись к своим значениям по умолчанию (т. Е. Элемент-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

Надеюсь, я вас правильно понял ...

Вы можете инвертировать медиа-запрос, то есть применить изменения с размером экрана минимум .

Таким образом, по умолчанию .grid-row-5 предполагает только 1 столбец, а при размерах экрана выше 1024 пикселей он занимает дополнительные столбцы.

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>

Answer 2

по умолчанию для grid-column равно auto.

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

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