使用 BootStrap4 创建网格图像系统

Question

如何使用 bootstrap4 和 css3 创建这个网格图像系统？

Check this link to see what I want

Answer 1

我在这里为您提供了 HTML 和 CSS 的基本结构。您可以根据您的要求自定义样式。例如：- 网格项之间的边距。

<div class="container">
  <div class="row">
    <div class="col-6 bg-info">
<!-- Your 1st grid item releated elements here -->
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 bg-secondary column">
          <!-- Your 2nd grid item releated elements here -->
        </div>
        <div class="col-6 bg-success column">
          <!-- Your 3rd grid item releated elements here -->
        </div>
        <div class="col-6 bg-danger column">
          <!-- Your 4th grid item releated elements here -->
        </div>
        <div class="col-6 bg-warning column">
          <!-- Your 5th grid item releated elements here -->
        </div>
      </div>
    </div>
  </div>
</div>

.column {
  padding-top: 25%;
}

https://codepen.io/yushanfernando/pen/GRWdQgd

仅使用 Bootstrap 4 网格系统即可实现这一切。

如果您需要进一步的支持，请告诉我。