顶部菜单栏

Question

我一直在尝试 - 并且失败 - 在CSS flexbox中获得以下网格布局（没有网格，我需要支持旧浏览器）：

如你所见，我需要一个

• 菜单栏（深灰色），始终在顶部，始终为全宽和固定高度
• 2x2网格（蓝色和白色），纵向模式下的全宽和横向上的纵横比
• 使用剩余可用空间的紫色容器。下面叠加在肖像上和侧面上。

我知道媒体查询，我想我需要一个来限制.grid宽度，但我不知道如何使用它来获得横向布局。

看起来很简单，但我想我需要你的帮助！ ：（

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 0 auto;
}

.grid {
  width: 50vw;
}

.topbar {
  background-color: #1f1f1f;
  max-height: 50px;
}

.purple {
  background-color: #663353;
}

.purple p {
  padding: 2em;
}

.grid:nth-child(3n+1) {
  background-color: #6798cc;
}

<div class="container">

  <div class="row topbar"></div>
  <div class="row wrap">
    <div class="col grid"></div>
    <div class="col grid"></div>
    <div class="col grid"></div>
    <div class="col grid"></div>
  </div>
  <div class="row">
    <div class="col purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam rerum laborum velit obcaecati, eveniet reiciendis, veritatis ipsa ducimus recusandae quidem nesciunt dolor facilis sed neque quod.</p>
    </div>
  </div>
</div>