азаза

ul{display:grid; grid-template-columns:50px 1fr; list-style-type:none; align-items:center;}
li{background-size: auto 100%;}
li:nth-child(1) {background:url(img/1.png) left center no-repeat ; padding-left:50px;}
li:nth-child(2) {background:url(img/2.png) left center no-repeat ; padding-left:50px;}
li:nth-child(3) {background:url(img/3.png) left center no-repeat ; padding-left:50px;}
li:nth-child(4) {background:url(img/4.png) left center no-repeat ; padding-left:50px;}
li:nth-child(5) {background:url(img/5.png) left center no-repeat ; padding-left:50px;}
li:nth-child(6) {background:url(img/6.png) left center no-repeat ; padding-left:50px;}

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

table{border-collapse:collapse;}
table td{border:1px solid #999;}

.container{border-right:1px solid #999; border-top:1px solid #999;
display:grid; grid-template-columns:repeat(3, 1fr);}
.container div{border-left:1px solid #999; border-bottom:1px solid #999;}

<div class="container">
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
</div>

<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}