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

.col { padding: .5rem; }

.col-1 { padding: .5rem; width: calc(100% / 12 * 1); }
.col-2 { padding: .5rem; width: calc(100% / 12 * 2); }
.col-3 { padding: .5rem; width: calc(100% / 12 * 3); }
.col-4 { padding: .5rem; width: calc(100% / 12 * 4); }
.col-5 { padding: .5rem; width: calc(100% / 12 * 5); }
.col-6 { padding: .5rem; width: calc(100% / 12 * 6); }
.col-7 { padding: .5rem; width: calc(100% / 12 * 7); }
.col-8 { padding: .5rem; width: calc(100% / 12 * 8); }
.col-9 { padding: .5rem; width: calc(100% / 12 * 9); }
.col-10 { padding: .5rem; width: calc(100% / 12 * 10); }
.col-11 { padding: .5rem; width: calc(100% / 12 * 11); }
.col-12 { padding: .5rem; width: calc(100% / 12 * 12); }