DEV Community

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

Sebastiano Guerriero on December 27, 2019

Lately, I've been experimenting with the idea of building a lightweight grid system based on CSS Grid. We do have a grid system in CodyFrame, and...

Read full post

Mr Tùng • Dec 27 '19

Great post 👍

Sebastiano Guerriero • Dec 27 '19

Thanks! 🙌

Gang Qiu • Dec 27 '19

This is awesome!

Sebastiano Guerriero • Dec 27 '19

Thanks! :)

Raghavendra S Diddimani • Jan 2 '20 • Edited

@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.

Sebastiano Guerriero • Jan 2 '20

Hi Raghavendra! Vendor prefixes are important indeed! However, I prefer to add them using Autoprefixer (or a Post CSS plugin). Cheers!

Raghavendra S Diddimani • Jan 7 '20

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 • Jan 9 '20

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

Jaroslav Fišer • Aug 29 '23 • Edited

Hello, I just found your work and I must say, I love how light it is but still pumping lot of work.

I might have one small comment about breakpoints. I would not use them as rem but in px instead. The thing is, px will stay static but when you change by any change font-size on html tag, it will shift also your grid and whole layout. Not speaking about dynamic font-size set on html.

Otherwise I am definitly using this and thank you very much for showing it.

rainocode • Apr 15

Ready to level up your CSS Grid skills? In this immersive tutorial, you'll dive into the world of CSS Grid layout by building your very own grid system, dubbed "Flash Grid." Through a series of step-by-step exercises and explanations, you'll learn the ins and outs of CSS Grid while constructing a versatile and customizable grid system that you can use in your projects.visit link rainocode.com/blog/flash-grid-lear...

Md. Anam Hossain • Dec 28 '19

Thanks for this awesome post👍👍👍

Sebastiano Guerriero • Dec 29 '19

Glad to hear you liked it! 😊

Paul • Dec 27 '19

I always thought it was weird that the flexbox grid system in CodyFrame used the class .grid. Any thought to refactoring that so that this could be used in tandem?

Sebastiano Guerriero • Dec 28 '19

Hi Paul! While I understand that a .grid class used for flexbox properties may sound confusing (considering we have many utility classes), I think our whole grid system replaces the purpose of CSS Grid utility classes. At this point, I'm not sure we can have a "grid system" and CSS Grid utility classes that work together without creating redundancy. However, we do have plans to inject some CSS Grid magic into the grid system of CodyFrame :)

edquijano • Dec 31 '19

Pretty advance. Awesome.
I have a question. Sometimes we need to accommodate rows, how we define rows?

Thanks.

Sebastiano Guerriero • Jan 2 '20

Hi there! Rows are a bit more complicated. Not in CSS per se: you can define row templates just as you would define columns, with grid-template-rows and grid-row (or grid-row-start + grid-row-end). However, it is a bit more complicated to abstract utility classes, because the number of rows you need varies from layout to layout. Probably a good idea would be introducing .row-start and .row-end classes, then take advantage of CSS Grid implicit grids.

Denis • Aug 24 '22 • Edited

Super grid. Help me plz,

<div class="grid">
    <div class="col-9\@lg"></div>
    <div class="col-3\@sm"></div>
</div>

classes don't work, why ?

Denis • Aug 28 '22 • Edited

<div class="col-9@lg"></div>

WORK

David Nitzsche-Bell • Jan 25 '20

This seems to completely undo many of the benefits of CSS Grid, like smaller, simpler, more flexible code. Your code seems needlessly verbose and complicated.

Why would I use this?