一个满屏品布局怎么设计？

         *  {
        margin: 0;
        padding: 0;
      }
 
      .top {
        width: 100%;
        height: 50vh;
        background-color: aqua;
      }
 
      .bottom {
        display: flex;
        flex-wrap: wrap;
      }
 
      .bottom div {
        width: 50%;
        height: 50vh;
      }
    </style>
 
     <div class="top"></div>
    <div class="bottom">
      <div style="background-color: blue;"></div>
      <div style="background-color: red;"></div>
    </div>