通过设置高度来构建网格

Question

我试图从这个Bootstrap 3模板中创建一个灵感的网格系统:

链接到模板

我可以在代码中看到,通过设置高度来控制4个大网格元素.我可以制作前2个网格项,但我现在迷失了如何制作2个小列.

这是我到目前为止所做的代码:

[链接到我的演示模型] [3]

<style>
    .bg-img {
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat; 
    }

    .item1 {
        height:600px;
    }

    .item2 {
        height:300px;
    }

    .item3 {
        height: 300px;
    }
</style>

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 bg-img item1" style="background-image:url(https://placehold.it/600x600;)"></div>
            <div class="col-sm-6 bg-img item2" style="background-image:url(https://placehold.it/300x600;)"></div>
        </div>
    </div>
</section>

有谁能够帮我？

最好的祝福.

Answer 1

我希望这段代码能对您有所帮助。我用css做的Grid。

.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
</div>