html - 设置高度的建筑网格

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>

有谁能够帮助我？

最好的祝福。

标签： htmlcsstwitter-bootstrap

Answer 1

我希望这段代码对你有帮助。我用Gridcss 做这个。

.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>