使用垂直和水平分隔符在卡片中设置CSS样式和结构化内容

我希望用垂直和水平分隔符来构造统计数据，如下图所示。我已经准备好了外部阴影卡，里面我需要格式化这些统计数据以便显示。任何指导都是非常感谢提前，有点新手在这里

.divSquareStats{ 文本对齐：居中；宽度：94vw；高度：28vh；溢出：隐藏；左侧边距：12px；顶部边距：15px； 过渡：边界半径0.15s； 边界半径：30px； 字体系列：Nonito； 字体大小：粗体！重要； 字体大小：13px； 光标：指针；边框：5px纯白；浮动：左；} .z-depth-3{ 长方体阴影：0 3px 5px 0 rgba0,0,0,0.14,0 1px 9px 0 rgba0,0,0,0.12,0 1px 2px-1px rgba0,0,0,0.3；} 这里有统计数字

---

我认为这应该给你指出正确的方向。如果你需要更多的帮助，请告诉我

HTML

---

这可以通过tables.SO实现，因此它不是一个代码编写服务。请添加您所拥有的相关代码片段，以便我们能为您提供一些帮助。为了佛陀的爱，请不要像@MuhammadUmerHassan建议的那样使用表格进行布局。糟糕的，糟糕的做法。

<div class="container">
    <div class="row separators">
        <div class="column one-third"></div>
        <div class="column one-third"></div>
        <div class="column one-third"></div>
    </div>
    <div class="row no-separators">
        <div class="column one-half"></div>
        <div class="column one-half"></div>
    </div>
</div>

.row:not(:first-child) {
    border-top: 1px solid #000;
}
.separators .column:not(:first-child) {
    border-left: 1px solid #000;
}