如何在两行中制作四个盒子，而在视觉作曲者WordPress中没有任何间隙？

Question

我想分两行制作四个盒子。两行之间将没有填充/间隙。整个部分将被拉伸。

框的示例如下：

如何获得此？请帮忙。预先感谢。

Answer 1

html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 0px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 0px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }

<div class="grid2x2">
  <div class="box box1"><div>one</div></div>
  <div class="box box2"><div>two</div></div>
  <div class="box box3"><div>three</div></div>
  <div class="box box4"><div>four</div></div>
</div>