如何实现2个div并排显示、另外2个div排布在其下方的布局效果

要实现上方2个div并排、下方2个div逐行占满宽度的效果，用CSS Flex或者Grid都可以快速实现，以下是可直接复用的代码：

方案1：Flex 布局（兼容性最佳，项目里最常用） #

核心逻辑是给外层容器开启支持换行的弹性布局，上方两个div各占50%宽度，下方两个div默认占满整行宽度即可。

/* 样式部分 */
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 不需要方块间距就删掉下面这行 */
  gap: 8px;
}
.item {
  /* 固定高度方便看效果，可按需调整 */
  height: 160px;
  box-sizing: border-box;
}
.top-item {
  /* 不需要间距就直接写width: 50% */
  width: calc(50% - 4px);
}
.bottom-item {
  width: 100%;
}
/* 对应参考图的四个方块配色，可替换成自己需要的颜色 */
.item1 {background: #f25f5c;}
.item2 {background: #247ba0;}
.item3 {background: #ffe066;}
.item4 {background: #50514f;}

<!-- 结构部分 -->
<div class="wrap">
  <div class="item top-item item1"></div>
  <div class="item top-item item2"></div>
  <div class="item bottom-item item3"></div>
  <div class="item bottom-item item4"></div>
</div>

方案2：Grid 布局（代码更简洁） #

不需要兼容IE等老旧浏览器的话，用Grid写代码量更少，不需要单独给上下元素区分宽度逻辑：

.wrap {
  display: grid;
  /* 第一行自动分成两个等宽列 */
  grid-template-columns: 1fr 1fr;
  width: 100%;
  /* 不需要间距就删掉 */
  gap: 8px;
}
.item {
  height: 160px;
  box-sizing: border-box;
}
.bottom-item {
  /* 让下方元素跨所有列，自动占满整行 */
  grid-column: 1 / -1;
}
/* 配色和上面一致 */
.item1 {background: #f25f5c;}
.item2 {background: #247ba0;}
.item3 {background: #ffe066;}
.item4 {background: #50514f;}

Grid方案的HTML结构和Flex方案完全一致，不需要额外修改。

小提示：如果要给div加边框、内边距，记得保留box-sizing: border-box属性，避免宽度溢出导致布局错位。

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