DEV Community

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

⚡️ 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...
Collapse
 
raghavd17 profile image
Raghavendra S Diddimani • 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.

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

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

Collapse
 
raghavd17 profile image
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;
}
}

Thread Thread
 
guerriero_se profile image
Sebastiano Guerriero

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

Collapse
 
gangqiu profile image
Gang Qiu

This is awesome!

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

Thanks! :)

Collapse
 
mrtung profile image
Mr Tùng

Great post 👍

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

Thanks! 🙌

Collapse
 
ernedar profile image
Jaroslav Fišer • 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.

Collapse
 
theanamhossain profile image
Md. Anam Hossain

Thanks for this awesome post👍👍👍

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

Glad to hear you liked it! 😊

Collapse
 
peiche profile image
Paul

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?

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

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 :)

Collapse
 
fetfurmoz1985 profile image
Denis • Edited

Super grid. Help me plz,

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

classes don't work, why ?

Collapse
 
fetfurmoz1985 profile image
Denis • Edited

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

WORK

Collapse
 
edquijano profile image
edquijano

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

Thanks.

Collapse
 
guerriero_se profile image
Sebastiano Guerriero

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.

Collapse
 
reknoz profile image
David Nitzsche-Bell

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?