如何使用CSS网格实现这一目标？

Question

我一直在玩CSS网格，出于某种原因我只是没有得到它。从我所听到的应该是容易的，所以要么我是愚蠢的，要么我没有得到它。我决定废弃那个，然后问你们（哦，那些曾经帮助过我这么多次的强大霸主）。

我正在努力实现以下目标：

提前大力表示感谢。

Answer 1

<section id="page">
  <div class="green"></div>
  <div class="red"></div>
  <div class="blue"></div>
</section>

#page > .green {
  grid-area: green;
  background-color: green;
}

#page > .red {
  grid-area: red;
  background-color: red;
}

#page > .blue {
  grid-area: blue;
  background-color: blue;
}


#page {
  display: grid;
  width: 100%;
  height: 250px;
}
/* desktop */
@media screen and (min-width: 801px){
  #page{
     grid-template-areas: "green red  blue";
  grid-template-rows: 50px;
  grid-template-columns: 1fr 150px 150px;
  } 
}
/* tablet */
@media screen and (min-width: 450px) and (max-width: 800px){
  #page{
    grid-template-areas: "green red"
                       "green blue";
  grid-template-rows: 125px 125px;
  grid-template-columns: 1fr 1fr; 
  } 
}


/* mobile */
@media screen and (max-width: 449px) {
  #page{
     grid-template-areas: "green"
                      "red"
                      "blue";
   grid-template-rows: 50px 50px 50px;
   grid-template-columns: 1fr;
  }
}

https://codepen.io/anon/pen/eMzEqd?editors=0100