Flexbox grid

grid.css

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid-col--auto,
.grid-col--1,
.grid-col--2,
.grid-col--3,
.grid-col--4,
.grid-col--5,
.grid-col--6,
.grid-col--7,
.grid-col--8,
.grid-col--9,
.grid-col--10,
.grid-col--11,
.grid-col--12 {
  flex-grow: 1;
  flex-shrink: 1;
}

.grid-col--auto { flex-basis: auto; }
.grid-col--1 { flex-basis: 8.3333%; }
.grid-col--2 { flex-basis: 16.6666%; }
.grid-col--3 { flex-basis: 25%; }
.grid-col--4 { flex-basis: 33.3333%; }
.grid-col--5 { flex-basis: 41.6666%; }
.grid-col--6 { flex-basis: 50%; }
.grid-col--7 { flex-basis: 58.3333%; }
.grid-col--8 { flex-basis: 66.6666%; }
.grid-col--9 { flex-basis: 75%; }
.grid-col--10 { flex-basis: 83.3333%; }
.grid-col--11 { flex-basis: 91.6666%; }
.grid-col--12 { flex-basis: 100%; }