仪表盘引导板

Question

我是开发布局的新手，想知道是否有人可以帮助我指出构建如下所示的仪表板UI页面的正确方向：

我正在使用React，所以尝试了Bootstrap 4，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 grid：

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：https://codepen.io/hans-felix/pen/eYpjJoB