CSS实现三列并排布局 解决元素纵向排列问题

我是编程新手，想要将当前纵向堆叠的功能盒子调整为并排排列，实现三列布局效果，预期效果参考示意图：

以下是当前编写的demo代码，调整margin-bottom等属性后始终没有达到预期效果：

现有CSS代码 #

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; // 调整过该属性但未生效
}

.product__sidebar__view__item h5 {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}

现有HTML代码 #

<section class="product spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-8 col-sm-8">
        <div class="sidebar_product">
          <div class="product__sidebar__view">
            <div class="section-title">
              <h5>Main Menu</h5>
            </div>
            <div class="column">
              <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                <h5><a href="/billing">Survey</a></h5> 
              </div>
              <div class="product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
                <h5><a href="#">Actor Mapping</a></h5>
              </div>
              <div class="product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
                <h5><a href="#">Political Text Analysis</a></h5>
              </div>
              <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
                <h5><a href="#">Social Media Network Analysis</a></h5>
              </div>
              <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
                <h5><a href="#">Media Monitoring</a></h5>
              </div>
            </div>  
          </div>        
        </div>
      </div>
    </div>
  </div>
</section>

调整margin-bottom无效是因为该属性仅控制元素的下外边距，无法改变块级元素默认占满整行、纵向堆叠的排列规则，要实现三列并排布局，直接通过Flex布局控制父容器排列规则即可，仅需修改两处CSS：

• 给包裹所有卡片的父容器.column添加Flex布局属性，控制自动换行和元素间距

.column {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

• 调整单个卡片.product__sidebar__view__item的宽度，保证一行刚好容纳3个卡片，删除原有无效的margin-bottom属性，间距统一由父容器的gap控制

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  /* 三列宽度计算：总宽度减去两个20px的间距，除以3 */
  width: calc((100% - 40px) / 3);
}
/* 可选移动端适配：屏幕宽度小于768px时自动切换为单列 */
@media (max-width: 767px) {
  .product__sidebar__view__item {
    width: 100%;
  }
}

如果项目已经引入Bootstrap框架，可以不用写自定义CSS：直接把父容器.column的类名改成row，给每个.product__sidebar__view__item添加col-lg-4 col-md-6 col-sm-12类名，就能直接实现响应式三列布局。

内容的提问来源于stack exchange，提问作者Jacob Septianus Wijaya