我该如何使用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>

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

- TheMoFaDe

---

使用 bootstrap 吗？ - User863

我的Fiddle没有引用Bootstrap，但是我可以使用Bootstrap v4。 - TheMoFaDe

你已经有答案了吗？ - m4n0

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

Answer 1

这可以通过Bootstrap 4的网格系统轻松完成。红色边框用于可视化。从这里，您可以为列内容添加正确的填充/边距。

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

- VDWWD

Answer 2

你可以使用Bootstrap网格来制作这个。

<div class="container">
<div class="row no-gutters">
    <div class="col-md-4"></div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-12"></div>
        </div>
        <div class="row">
            <div class="col-md-5"></div>
            <div class="col-md-6"></div>
        </div>
    </div>
</div>

在这里查找更多详细信息：https://getbootstrap.com/docs/4.0/layout/grid/

- Noureddine