Как сделать четыре поля в два ряда без каких-либо пробелов в визуальном композиторе WordPress?

Question

Я хочу сделать четыре коробки в два ряда. Там не будет отступов / пробел между двумя рядами. Весь раздел будет растянут.

Пример блоков приведен ниже:

Как это получить? Пожалуйста помоги. Заранее спасибо.

Answer 1

Вы можете сделать это, добавив модуль CUSTOM HTML в VC, а затем используя flex

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>