html - Bootstrap 4 马赛克布局

Question

我真的在努力实现马赛克风格的布局。我曾尝试使用 Bootstrap 4 的网格系统、flex 和各种其他方法，但我似乎不具备实现在所有设备上都运行良好的解决方案的知识。

我附上了布局的图像，中间的两个框是文本内容，其余是图像，所有这些都需要在所有设备上播放。

任何帮助是极大的赞赏！

Answer 1

你试过引导程序.card-columns吗？（https://getbootstrap.com/docs/4.0/components/card/#card-columns）。我过去曾使用此解决方案使用 bootstrap 4 进行马赛克布局。

Answer 2

请尝试此代码

.item1 {
  grid-area: area1;
}

.item4 {
  height: 100px;
}


.item5 {
  grid-area: area5;
}


.grid-container {
  display: grid;
  grid-template-areas:
    'area1 . .'
    'area1 area4 area5'
    'area1 . area5'
    '. . area5';
  grid-gap: 2px;
}

.grid-container > div {
  background-color: #323232;
  text-align: center;
  padding: 40px;
}

<div class="grid-container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>  
  <div class="item4"></div>
  <div class="item5"></div>
  <div class="item6"></div>
  <div class="item7"></div>
  <div class="item8"></div>
</div>