使网格的一个元素（逐渐）消失？答案

【问题标题】：Make one elemenet of grid (gradually) disappear?使网格的一个元素（逐渐）消失？
【发布时间】：2020-08-02 08:50:06
【问题描述】：

如何为 grid-template-areas 属性设置动画？当宽度大于 1000px 时，我希望底栏消失。这段代码什么都不做，我不能让它工作。元素留在原处。

.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>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

我希望底栏在宽度超过 1000 像素时消失

只需添加到您的 CSS 中

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

仅此而已

【讨论】：