您可以使用flexbox。

.layout {
  display: flex;
  flex-flow: column;
  gap: 30px;
  align-items: center;
  width: fit-content;
}
.row {
  display: flex;
  gap: 30px;
}
.square {
  width: 100px;
  height: 100px;
  background-color: #dfdfdf;
}

<div class="layout">
  <div class="row">
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="row">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>

每个正方形的尺寸为100px/100px。
.layout div的gap样式为30px。这意味着每个元素之间有30个像素的间隙。此外，.layout div内的元素都居中。
.row div也有一个30像素的gap样式，所以所有正方形之间都有30像素的间隙。

如果只是为了这一部分，并且不需要任何非常容易重用的东西，或者不需要可以编程设置的东西，那么可以遵循codepen。
这使用了一个有5个元素的网格布局。当使用3列布局时，顶部的2个元素相对于父元素定位并移动以满足居中要求。

• • 超文本标记语言**

<div class="grid">
  <div class="grid-item offset">
    
  </div>
  <div class="grid-item offset">
    
  </div>
  <div class="grid-item new-row">
    
  </div>
  <div class="grid-item new-row">
    
  </div>
  <div class="grid-item new-row">
    
  </div>
</div>

• • 中央支助组**

.grid {
  display: grid;
  gap: 50px;
  grid-template: 300px / auto auto auto 
}

.grid-item {
  width: 100%;
  height: 300px;
  background: #ccc;
}

.new-row {
  grid-row: 2;
}

.offset {
  position: relative;
  left:50%;
}

只要确保您调整您的高度和宽度，以符合您的实际设计尺寸和容器限制。

根据您使用的css， Bootstrap 将如下所示

<div class='container-fluid'>
    <div class='row'>
        <div class='col'>
one
        </div>
        <div class='col'>
two
        </div>
    </div>
    <div>
        <div class='col'>
one
        </div>
        <div class='col'>
two
        </div>
        <div class='col'>
three
        </div>
     </div>
</div>