响应网格具有不同的列高度

Question

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

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

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