OOCSS grids, flexbox edition

original-simplified.css

.line {
  overflow: hidden;
}

.unit {
  float: left;
  box-sizing: border-box;
}

.size1of1 { float: none; }
.size1of2 { width: 50%; }
.size1of3 { width: 33.333333%; }
.size2of3 { width: 66.666666%; }
.size1of4 { width: 25%; }
.size3of4 { width: 75%; }
.size1of5 { width: 20%; }
.size2of5 { width: 40%; }
.size3of5 { width: 60%; }
.size4of5 { width: 80%; }

using-flexbox.css

.line {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.size1of1 { flex-grow: 60; }
.size1of2 { flex-grow: 30; }
.size1of3 { flex-grow: 20; }
.size2of3 { flex-grow: 40; }
.size1of4 { flex-grow: 15; }
.size3of4 { flex-grow: 45; }
.size1of5 { flex-grow: 12; }
.size2of5 { flex-grow: 24; }
.size3of5 { flex-grow: 36; }
.size4of5 { flex-grow: 48; }