Заставить (постепенно) исчезнуть один элемент enet сетки?

Question

Как я могу анимировать свойство grid-template-sizes ? Я хочу, чтобы нижний столбец исчезал, когда ширина больше 1000 пикселей . Этот код ничего не делает, и я не могу заставить его работать. Элементы остаются на месте.

.header_nav_container {
  display: grid;
  grid-template-areas: 
    "top"
    "botom";
}

.top_row {
  grid-area: top;
}

.bottom_row {
  grid-area: botom;
}

@media all and (max-width: 1000px) {
  .header_nav_container {
    grid-template-areas: 
      "top"
      "botom";
    color: blue;
    transition: all 300ms;
  }
}

@media all and (max-width: 800px) {
  .header_nav_container {
    grid-template-areas: 
      "top";
    color: red;
  }
}

<header>
  <nav class="header_nav_container">
    <div class="top_row">
      TOP ROW CONTENT
    </div>
    <div class="bottom_row">
      BOTTOM ROW CONTENT
    </div>
  </nav>
</header>

Answer 1

Я хочу, чтобы нижний столбец исчезал, когда ширина больше 1000 пикселей

Просто добавьте к CSS

@media all and (min-width: 1000px) {
  .bottom_row {
    display: none;
  }
}

и все