Discussion on: ⚡️ Flash Grid: learn CSS Grid by building a grid system

[Raghavendra S Diddimani]

Yep, you are right.

I used the postcss for the autoprefix

But It not working in IE 11 browser.

Is there any solutions for IE 11 support...!!

Here the CSS generated by postcss

body {
font-family: "helvetica";
padding: 1rem;
}

.child {
background-color: violet;
min-height: 3rem;
padding: var(--grid-gap, 0);
}

.grid, [class*=grid-auto-] {
display: -ms-grid;
display: grid;
grid-gap: var(--grid-gap, 0);
}

.grid {
--grid-cols: 12;
-ms-grid-columns: (1fr)[var(--grid-cols)];
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid > * {
-ms-grid-column-span: var(--grid-cols);
grid-column-end: span var(--grid-cols);
}

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs {
--col-min-width: 8rem;
}

.grid-auto-sm {
--col-min-width: 10rem;
}

.grid-auto-md {
--col-min-width: 15rem;
}

.grid-auto-lg {
--col-min-width: 20rem;
}

.grid-auto-xl {
--col-min-width: 25rem;
}

.grid-auto-cols {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-gap-xxxxs {
--grid-gap: var(--space-xxxxs, 0.125rem);
}

.grid-gap-xxxs {
--grid-gap: var(--space-xxxs, 0.25rem);
}

.grid-gap-xxs {
--grid-gap: var(--space-xxs, 0.375rem);
}

.grid-gap-xs {
--grid-gap: var(--space-xs, 0.5rem);
}

.grid-gap-sm {
--grid-gap: var(--space-sm, 0.75rem);
}

.grid-gap-md {
--grid-gap: var(--space-md, 1.25rem);
}

.grid-gap-lg {
--grid-gap: var(--space-lg, 2rem);
}

.grid-gap-xl {
--grid-gap: var(--space-xl, 3.25rem);
}

.grid-gap-xxl {
--grid-gap: var(--space-xxl, 5.25rem);
}

.grid-gap-xxxl {
--grid-gap: var(--space-xxxl, 8.5rem);
}

.grid-gap-xxxxl {
--grid-gap: var(--space-xxxxl, 13.75rem);
}

.col-1 {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1 {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2 {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2 {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3 {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3 {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4 {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4 {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5 {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5 {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6 {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6 {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7 {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7 {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8 {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8 {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9 {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9 {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10 {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10 {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11 {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11 {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12 {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12 {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12 {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13 {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end {
-ms-grid-column-span: -1;
grid-column-end: -1;
}

@media (min-width: 32rem) {
.grid-auto-xs\@xs {
--col-min-width: 8rem;
}

.grid-auto-sm\@xs {
--col-min-width: 10rem;
}

.grid-auto-md\@xs {
--col-min-width: 15rem;
}

.grid-auto-lg\@xs {
--col-min-width: 20rem;
}

.grid-auto-xl\@xs {
--col-min-width: 25rem;
}

.grid-auto-cols\@xs {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.col-1\@xs {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1\@xs {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2\@xs {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2\@xs {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2\@xs {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3\@xs {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3\@xs {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3\@xs {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4\@xs {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4\@xs {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4\@xs {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5\@xs {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5\@xs {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5\@xs {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6\@xs {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6\@xs {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6\@xs {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7\@xs {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7\@xs {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7\@xs {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8\@xs {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8\@xs {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8\@xs {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9\@xs {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9\@xs {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9\@xs {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10\@xs {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10\@xs {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10\@xs {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11\@xs {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11\@xs {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11\@xs {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12\@xs {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12\@xs {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12\@xs {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13\@xs {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start-auto\@xs {
-ms-grid-column: auto;
grid-column-start: auto;
}

.col-end-auto\@xs {
-ms-grid-column-span: auto;
grid-column-end: auto;
}
}
@media (min-width: 48rem) {
.grid-auto-xs\@sm {
--col-min-width: 8rem;
}

.grid-auto-sm\@sm {
--col-min-width: 10rem;
}

.grid-auto-md\@sm {
--col-min-width: 15rem;
}

.grid-auto-lg\@sm {
--col-min-width: 20rem;
}

.grid-auto-xl\@sm {
--col-min-width: 25rem;
}

.grid-auto-cols\@sm {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.col-1\@sm {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1\@sm {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2\@sm {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2\@sm {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2\@sm {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3\@sm {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3\@sm {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3\@sm {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4\@sm {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4\@sm {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4\@sm {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5\@sm {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5\@sm {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5\@sm {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6\@sm {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6\@sm {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6\@sm {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7\@sm {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7\@sm {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7\@sm {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8\@sm {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8\@sm {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8\@sm {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9\@sm {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9\@sm {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9\@sm {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10\@sm {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10\@sm {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10\@sm {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11\@sm {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11\@sm {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11\@sm {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12\@sm {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12\@sm {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12\@sm {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13\@sm {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start-auto\@sm {
-ms-grid-column: auto;
grid-column-start: auto;
}

.col-end-auto\@sm {
-ms-grid-column-span: auto;
grid-column-end: auto;
}
}
@media (min-width: 64rem) {
.grid-auto-xs\@md {
--col-min-width: 8rem;
}

.grid-auto-sm\@md {
--col-min-width: 10rem;
}

.grid-auto-md\@md {
--col-min-width: 15rem;
}

.grid-auto-lg\@md {
--col-min-width: 20rem;
}

.grid-auto-xl\@md {
--col-min-width: 25rem;
}

.grid-auto-cols\@md {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.col-1\@md {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1\@md {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2\@md {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2\@md {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2\@md {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3\@md {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3\@md {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3\@md {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4\@md {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4\@md {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4\@md {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5\@md {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5\@md {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5\@md {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6\@md {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6\@md {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6\@md {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7\@md {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7\@md {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7\@md {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8\@md {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8\@md {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8\@md {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9\@md {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9\@md {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9\@md {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10\@md {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10\@md {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10\@md {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11\@md {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11\@md {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11\@md {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12\@md {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12\@md {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12\@md {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13\@md {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start-auto\@md {
-ms-grid-column: auto;
grid-column-start: auto;
}

.col-end-auto\@md {
-ms-grid-column-span: auto;
grid-column-end: auto;
}
}
@media (min-width: 80rem) {
.grid-auto-xs\@lg {
--col-min-width: 8rem;
}

.grid-auto-sm\@lg {
--col-min-width: 10rem;
}

.grid-auto-md\@lg {
--col-min-width: 15rem;
}

.grid-auto-lg\@lg {
--col-min-width: 20rem;
}

.grid-auto-xl\@lg {
--col-min-width: 25rem;
}

.grid-auto-cols\@lg {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.col-1\@lg {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1\@lg {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2\@lg {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2\@lg {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2\@lg {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3\@lg {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3\@lg {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3\@lg {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4\@lg {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4\@lg {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4\@lg {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5\@lg {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5\@lg {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5\@lg {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6\@lg {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6\@lg {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6\@lg {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7\@lg {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7\@lg {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7\@lg {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8\@lg {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8\@lg {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8\@lg {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9\@lg {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9\@lg {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9\@lg {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10\@lg {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10\@lg {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10\@lg {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11\@lg {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11\@lg {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11\@lg {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12\@lg {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12\@lg {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12\@lg {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13\@lg {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start-auto\@lg {
-ms-grid-column: auto;
grid-column-start: auto;
}

.col-end-auto\@lg {
-ms-grid-column-span: auto;
grid-column-end: auto;
}
}
@media (min-width: 90rem) {
.grid-auto-xs\@xl {
--col-min-width: 8rem;
}

.grid-auto-sm\@xl {
--col-min-width: 10rem;
}

.grid-auto-md\@xl {
--col-min-width: 15rem;
}

.grid-auto-lg\@xl {
--col-min-width: 20rem;
}

.grid-auto-xl\@xl {
--col-min-width: 25rem;
}

.grid-auto-cols\@xl {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.col-1\@xl {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}

.col-start-1\@xl {
-ms-grid-column: 1;
grid-column-start: 1;
}

.col-end-2\@xl {
-ms-grid-column-span: 2;
grid-column-end: 2;
}

.col-2\@xl {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}

.col-start-2\@xl {
-ms-grid-column: 2;
grid-column-start: 2;
}

.col-end-3\@xl {
-ms-grid-column-span: 3;
grid-column-end: 3;
}

.col-3\@xl {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}

.col-start-3\@xl {
-ms-grid-column: 3;
grid-column-start: 3;
}

.col-end-4\@xl {
-ms-grid-column-span: 4;
grid-column-end: 4;
}

.col-4\@xl {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}

.col-start-4\@xl {
-ms-grid-column: 4;
grid-column-start: 4;
}

.col-end-5\@xl {
-ms-grid-column-span: 5;
grid-column-end: 5;
}

.col-5\@xl {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}

.col-start-5\@xl {
-ms-grid-column: 5;
grid-column-start: 5;
}

.col-end-6\@xl {
-ms-grid-column-span: 6;
grid-column-end: 6;
}

.col-6\@xl {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}

.col-start-6\@xl {
-ms-grid-column: 6;
grid-column-start: 6;
}

.col-end-7\@xl {
-ms-grid-column-span: 7;
grid-column-end: 7;
}

.col-7\@xl {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}

.col-start-7\@xl {
-ms-grid-column: 7;
grid-column-start: 7;
}

.col-end-8\@xl {
-ms-grid-column-span: 8;
grid-column-end: 8;
}

.col-8\@xl {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}

.col-start-8\@xl {
-ms-grid-column: 8;
grid-column-start: 8;
}

.col-end-9\@xl {
-ms-grid-column-span: 9;
grid-column-end: 9;
}

.col-9\@xl {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}

.col-start-9\@xl {
-ms-grid-column: 9;
grid-column-start: 9;
}

.col-end-10\@xl {
-ms-grid-column-span: 10;
grid-column-end: 10;
}

.col-10\@xl {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}

.col-start-10\@xl {
-ms-grid-column: 10;
grid-column-start: 10;
}

.col-end-11\@xl {
-ms-grid-column-span: 11;
grid-column-end: 11;
}

.col-11\@xl {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}

.col-start-11\@xl {
-ms-grid-column: 11;
grid-column-start: 11;
}

.col-end-12\@xl {
-ms-grid-column-span: 12;
grid-column-end: 12;
}

.col-12\@xl {
-ms-grid-column-span: 12;
grid-column-end: span 12;
}

.col-start-12\@xl {
-ms-grid-column: 12;
grid-column-start: 12;
}

.col-end-13\@xl {
-ms-grid-column-span: 13;
grid-column-end: 13;
}

.col-start-auto\@xl {
-ms-grid-column: auto;
grid-column-start: auto;
}

.col-end-auto\@xl {
-ms-grid-column-span: auto;
grid-column-end: auto;
}
}

[Sebastiano Guerriero]

I'm afraid this system isn't compatible with IE (IE supports only a limited number of CSS Grid properties).