html - 我怎样才能用 CSS 重现这个？

Question

我被要求生成看起来像下面的模型图像的 html。我有一些生成正方形网格的示例 HTML 和 CSS。我需要能够将此网格转换为看起来像下面附加的模型图像。最好只使用 CSS，但我不限于只使用 CSS。我的代码片段不使用 bootstrap，但我可以访问 Bootstrap 4。

* {box-sizing: border-box;}
.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper div:nth-child(1) {
  grid-column: 1/1;
  grid-row: 1/5;
}
.wrapper div:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1/3;
}
.wrapper div:nth-child(3) {
  grid-column: 2/2;
  grid-row: 3/5;
}
.wrapper div:nth-child(4) {
  grid-column: 3/3;
  grid-row: 3/5;
}


.wrapper {
  display: grid;
  grid-template-columns: repeat(2,4); 
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
</div>

我的解决方案很接近，但第二行和第三列不匹配。

Answer 1

这可以通过 Bootstrap 4 轻松完成 grid system .红色边框用于可视化。从这里您可以向列内容添加正确的填充/边距。

<div class="container">
    <div class="row">
        <div class="col-3 red-border">

            Block 1

        </div>
        <div class="col">

            <div class="row">
                <div class="col red-border">

                    Block 2

                </div>
            </div>
            <div class="row">
                <div class="col-4 red-border">

                    Block 3

                </div>
                <div class="col red-border">

                    Block 4

                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .red-border {
        border: 1px solid red;
    }
</style>