如何用Flex/Grid CSS3实现无需media query的响应式复杂布局？

想要实现无需Media Query的响应式布局，可使用Flex或Grid，以下是尝试的代码及目标布局：

尝试的代码 #

CSS代码 #

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

.box {
  width: 33.33%;
  border: 1px solid black;
  min-height: 200px;
  padding: 0 15px;
}

.box:first-child {
  height: 100%;
  min-height: 100%;
}

.box:nth-child(3n) {
  min-height: 70%
}

HTML代码 #

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

目标布局 #

最终实现方案（Grid版本） #

Grid更适配这种不规则的行列结构，无需Media Query就能实现响应式效果：

完整代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: grid;
  /* 三列等分宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 两行高度占比7:3 */
  grid-template-rows: 70% 30%;
  height: 100vh;
}

.box {
  border: 1px solid black;
  padding: 0 15px;
}

/* 第一个盒子跨两行，占满左侧高度 */
.box:first-child {
  grid-row: 1 / span 2;
}

/* 第3、6个盒子占第一行高度 */
.box:nth-child(3),
.box:nth-child(6) {
  grid-row: 1 / span 1;
}

/* 第2、4、5个盒子占第二行高度 */
.box:nth-child(2),
.box:nth-child(4),
.box:nth-child(5) {
  grid-row: 2 / span 1;
}

HTML（沿用原结构即可）

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

说明 #

• 通过grid-template-columns和grid-template-rows定义固定的行列比例，容器高度设为视口高度100vh
• 利用grid-row控制盒子的跨行范围，实现不规则布局
• 布局会随容器宽度自动缩放，无需Media Query即可适配不同屏幕尺寸

内容的提问来源于stack exchange，提问作者Mirza Irtiza