css - 具有不同列高的响应式网格

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>