style.css

.row {
    max-width: 114rem;
    background-color: #eee;
    margin: 0 auto;
}

.row:not(:last-child) {
    margin-bottom: 8rem;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.row [class^="col-"] {
    background-color: darkblue;
    float: left;
    height: 50px;
    color: white;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.row [class^="col-"]:not(:last-child) {
    margin-right: 6rem;
}

.row .col-1-of-2 {
    width: calc((100% - 6rem) / 2);
}

.row .col-1-of-3 {
    width: calc((100% - 2*(6rem)) / 3);
}

.row .col-2-of-3 {
    width: calc((2 *(100% - 2*(6rem)) / 3) + 6rem);
}

.row .col-1-of-4 {
    width: calc((100% - 3*(6rem)) / 4);
}

.row .col-2-of-4 {
    width: calc((2 * ((100% - 3*(6rem)) / 4)) + 6rem);
}

.row .col-3-of-4 {
    width: calc((3 * ((100% - 3*(6rem)) / 4)) + 2 * 6rem);
}