CSS стилизация и структурирование контента в карточке с вертикальным и горизонтальным разделителями

Question

Я хочу структурировать статистические данные с помощью вертикальных и горизонтальных разделителей, как показано на рисунке ниже.У меня есть готовая внешняя теневая карта, в которой мне нужно отформатировать эти статистические данные для отображения.Любое руководство ценится заранее, немного новичок здесь.( образец изображения здесь )

.divSquareStats{

text-align:center;   width:94vw;  height: 28vh;    overflow: hidden;margin-left: 12px;margin-top: 15px;
transition: border-radius 0.15s ease;
border-radius: 30px;
font-family: Nonito;
font-weight: bolder !important;
font-size: 13px;
cursor: pointer;   border:5px solid white; float: left;   }
 
.z-depth-3 {

box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 9px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.3);   }

<div tappable col-12 text-center class="divSquareStats z-depth-3">   
 <span style="margin-top:10px; font-family:Roboto; float: left" class="user-name">
 Statistics goes here
  </span>
</div>
 

Answer 1

Я думаю, это должно указывать на правильное прямое.Дайте мне знать, если вам нужна дополнительная помощь.

HTML

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

CSS

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