具有不同列高的响应式网格答案

【问题标题】：Responsive grid with different column heights具有不同列高的响应式网格
【发布时间】：2016-08-16 17:07:30
【问题描述】：

有没有一种简单的方法可以在网格中排列一些不同大小的框并使其具有响应性？

我听说过使用砖石，但我正在寻找更简单的东西。这是 800px 长，所有东西在高度和宽度上都可以被 200px 整除：

【问题讨论】：

如果您的代码中存在错误或其他问题，请提出问题。请做一些事情并提出问题。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

【解决方案1】：

您可以使用Flexbox 来创建这种类型的布局。

body, html {margin: 0; padding: 0;}
.content {
  min-height: 100vh;
  display: flex;
  max-width: 800px;
  margin: 0 auto;
}
.a, .c {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.box {
  flex: 1;
}
.b {
  flex: 2;
  background: #CC6699;
}
.a .box:nth-child(1) {background: #FF9933;}
.a .box:nth-child(2) {background: #33CCFF;}
.c .box:nth-child(1) {background: #CCCCCC;}
.c .box:nth-child(2) {background: #33CC66;}

<div class="content">
  <div class="a">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="b"></div>
  <div class="c">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

【讨论】：

谢谢。但是，我遇到的问题是，如果我将 .content 的高度更改为例如400px 调整浏览器大小会导致蓝色和绿色框丢失。是否可以使用与 100vh 不同的高度的这种技术？
我认为如果你设置固定高度是不可能的。