展开的行相当于3列的大小

Question

我是一个开发布局的新手，想知道是否有人能帮我指出正确的方向，构建一个类似于这样的仪表盘UI页面。

我试过bootstrap，reactstrap，也玩过flex。我遇到的问题是在创建盒子6、7、7和9的时候。

我有一堆示例代码，但与flex的是。

.box {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.box>* {
    flex: 1 1 80px;
}

 <div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
  </div>

我愿意采用任何新的工具来帮助我实现这个目标 但优先考虑使用reactstrap或bootstrap或类似的工具。

Answer 1

一种方法是使用css 网格:

CSS:

.box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.six{
    grid-row: 2 / 4;
    grid-column: 1 /4;
}

.nine{
   grid-column: 5 /5;
     grid-row: 2 / 5;
}

HTML:

<div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div class="six">Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div class="nine">Nine</div>
    <div>Ten</div>
    <div>Eleven</div>
    <div>Twelve</div>
    <div>thirteen</div>
</div>

Codepen.Codepen.Iohans-felixpeneYpjJoB https:/codepen.iohans-felixpeneYpjJoB。