:root {
    --gap: 4px;
}

/* Grid like flex box */
.d-grid-col-2 { max-width: 20rem; }
.d-grid-col-3  { max-width: 30rem; }
.d-grid-col-4  { max-width: 40rem; }
.d-grid-col-5  { max-width: 50rem; }
.d-grid-col-6  { max-width: 60rem; }
.d-grid-col-7 { max-width: 70rem; }
.d-grid-col-8  { max-width: 80rem; }
.d-grid-col-9  { max-width: 90rem; }
.d-grid-col-10  { max-width: 100rem; }
.d-grid-col-11  { max-width: 110rem; }
.d-grid-col-12  { max-width: 120rem; }

/* Column counts */
.d-grid-col-2  > * { flex: 0 1 calc(100% / 2); }
.d-grid-col-3  > * { flex: 0 1 calc(100% / 3); }
.d-grid-col-4  > * { flex: 0 1 calc(100% / 4); }
.d-grid-col-5  > * { flex: 0 1 calc(100% / 5); }
.d-grid-col-6  > * { flex: 0 1 calc(100% / 6); }
.d-grid-col-7  > * { flex: 0 1 calc(100% / 7); }
.d-grid-col-8  > * { flex: 0 1 calc(100% / 8); }
.d-grid-col-9  > * { flex: 0 1 calc(100% / 9); }
.d-grid-col-10 > * { flex: 0 1 calc(100% / 10); }
.d-grid-col-11 > * { flex: 0 1 calc(100% / 11); }
.d-grid-col-12 > * { flex: 0 1 calc(100% / 12); }

.d-grid-col-2.gap-2  > * { flex: 0 1 calc(100% / 2 - var(--gap) * 2); }
.d-grid-col-3.gap-2  > * { flex: 0 1 calc(100% / 3 - var(--gap) * 2); }
.d-grid-col-4.gap-2  > * { flex: 0 1 calc(100% / 4 - var(--gap) * 2); }
.d-grid-col-5.gap-2  > * { flex: 0 1 calc(100% / 5 - var(--gap) * 2); }
.d-grid-col-6.gap-2  > * { flex: 0 1 calc(100% / 6 - var(--gap) * 2); }
.d-grid-col-7.gap-2  > * { flex: 0 1 calc(100% / 7 - var(--gap) * 2); }
.d-grid-col-8.gap-2  > * { flex: 0 1 calc(100% / 8 - var(--gap) * 2); }
.d-grid-col-9.gap-2  > * { flex: 0 1 calc(100% / 9 - var(--gap) * 2); }
.d-grid-col-10.gap-2 > * { flex: 0 1 calc(100% / 10 - var(--gap) * 2); }
.d-grid-col-11.gap-2 > * { flex: 0 1 calc(100% / 11 - var(--gap) * 2); }
.d-grid-col-12.gap-2 > * { flex: 0 1 calc(100% / 12 - var(--gap) * 2); }

.d-grid-col-2.gap-3  > * { flex: 0 1 calc(100% / 2 - var(--gap) * 3); }
.d-grid-col-3.gap-3  > * { flex: 0 1 calc(100% / 3 - var(--gap) * 3); }
.d-grid-col-4.gap-3  > * { flex: 0 1 calc(100% / 4 - var(--gap) * 3); }
.d-grid-col-5.gap-3  > * { flex: 0 1 calc(100% / 5 - var(--gap) * 3); }
.d-grid-col-6.gap-3  > * { flex: 0 1 calc(100% / 6 - var(--gap) * 3); }
.d-grid-col-7.gap-3  > * { flex: 0 1 calc(100% / 7 - var(--gap) * 3); }
.d-grid-col-8.gap-3  > * { flex: 0 1 calc(100% / 8 - var(--gap) * 3); }
.d-grid-col-9.gap-3  > * { flex: 0 1 calc(100% / 9 - var(--gap) * 3); }
.d-grid-col-10.gap-3 > * { flex: 0 1 calc(100% / 10 - var(--gap) * 3); }
.d-grid-col-11.gap-3 > * { flex: 0 1 calc(100% / 11 - var(--gap) * 3); }
.d-grid-col-12.gap-3 > * { flex: 0 1 calc(100% / 12 - var(--gap) * 3); }

.d-grid-col-2.gap-4  > * { flex: 0 1 calc(100% / 2 - var(--gap) * 4); }
.d-grid-col-3.gap-4  > * { flex: 0 1 calc(100% / 3 - var(--gap) * 4); }
.d-grid-col-4.gap-4  > * { flex: 0 1 calc(100% / 4 - var(--gap) * 4); }
.d-grid-col-5.gap-4  > * { flex: 0 1 calc(100% / 5 - var(--gap) * 4); }
.d-grid-col-6.gap-4  > * { flex: 0 1 calc(100% / 6 - var(--gap) * 4); }
.d-grid-col-7.gap-4  > * { flex: 0 1 calc(100% / 7 - var(--gap) * 4); }
.d-grid-col-8.gap-4  > * { flex: 0 1 calc(100% / 8 - var(--gap) * 4); }
.d-grid-col-9.gap-4  > * { flex: 0 1 calc(100% / 9 - var(--gap) * 4); }
.d-grid-col-10.gap-4 > * { flex: 0 1 calc(100% / 10 - var(--gap) * 4); }
.d-grid-col-11.gap-4 > * { flex: 0 1 calc(100% / 11 - var(--gap) * 4); }
.d-grid-col-12.gap-4 > * { flex: 0 1 calc(100% / 12 - var(--gap) * 4); }


[class*="d-grid-col-"] > .col-max {
    flex: 1 0 100% !important;
}