6
\$\begingroup\$

I am trying to build a 12-column CSS grid system very similar to Bootstrap. 4 breakpoints are supported: normal, sm, md, and lg. Anyway, here is the code:

.row {
    position: relative;
    width: 100%;
}
.row [class^="col-"] {
    float: left;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
[class^="col-"] {
    width: 100%;
}
.col-1 {
    width: 8.33333333%;
}
.col-2 {
    width: 16.66666667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-5 {
    width: 41.66666667%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33333333%;
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33333333%;
}
.col-11 {
    width: 91.66666667%;
}
.col-12 {
    width: 100%;
}
@media (min-width: 577px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33333333%;
    }
    .col-sm-5 {
        width: 41.66666667%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33333333%;
    }
    .col-sm-8 {
        width: 66.66666667%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33333333%;
    }
    .col-sm-11 {
        width: 91.66666667%;
    }
    .col-sm-12 {
        width: 100%;
    }
}
@media (min-width: 769px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-md-12 {
        width: 100%;
    }
}
@media (min-width: 993px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33333333%;
    }
    .col-lg-5 {
        width: 41.66666667%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33333333%;
    }
    .col-lg-8 {
        width: 66.66666667%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33333333%;
    }
    .col-lg-11 {
        width: 91.66666667%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

Would really appreciate a review of this code. So far, I have no problems in my testing. It is also meant to support IE11.

\$\endgroup\$
6
  • 1
    \$\begingroup\$ Is there a reason you are not using flexbox or css grid? \$\endgroup\$
    – gview
    Commented May 9, 2020 at 0:54
  • 1
    \$\begingroup\$ @gview Yes, I wanted to support IE11, and flex-box has some weird bugs that randomly popup on that browser. \$\endgroup\$
    – darkhorse
    Commented May 9, 2020 at 9:43
  • 1
    \$\begingroup\$ Are you using plain CSS or generating this code dynamically using some preprocessor language like SCSS? \$\endgroup\$ Commented May 10, 2020 at 7:10
  • 1
    \$\begingroup\$ @MohammadUsman Plain old CSS \$\endgroup\$
    – darkhorse
    Commented May 11, 2020 at 1:28
  • 1
    \$\begingroup\$ learncssgrid.com \$\endgroup\$
    – bzr
    Commented May 12, 2020 at 18:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.