@CodeWebHouse / @guerriero_se
Its really post and I was looking for the same since.
It could be good if u added the CSS prefix for the IE11 browsers as well.
Hi Raghavendra! Vendor prefixes are important indeed! However, I prefer to add them using Autoprefixer (or a Post CSS plugin). Cheers!
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; } }
I'm afraid this system isn't compatible with IE (IE supports only a limited number of CSS Grid properties).
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
@CodeWebHouse / @guerriero_se
Its really post and I was looking for the same since.
It could be good if u added the CSS prefix for the IE11 browsers as well.
Hi Raghavendra! Vendor prefixes are important indeed! However, I prefer to add them using Autoprefixer (or a Post CSS plugin). Cheers!
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;
}
}
I'm afraid this system isn't compatible with IE (IE supports only a limited number of CSS Grid properties).