12-column CSS grid system similar to Bootstrap

Question

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.

• gview: Is there a reason you are not using flexbox or css grid?
• darkhorse: @gview Yes, I wanted to support IE11, and flex-box has some weird bugs that randomly popup on that browser.
• Mohammad Usman: Are you using plain CSS or generating this code dynamically using some preprocessor language like SCSS?
• darkhorse: @MohammadUsman Plain old CSS
• user177966: learncssgrid.com

Answer 1

We are looking for answers that provide insightful observations about the code in the question. Answers that consist of independent solutions with no justification do not constitute a code review, and may be removed.

A tightened, drop-in version (float-based, IE11-safe)

*,
*::before,
*::after { box-sizing: border-box; }
.row { position: relative; width: 100%; }
.row::after { content: ""; display: table; clear: both; }
/* 2) base column behavior (no brittle attribute selectors) */
.col { float: left; width: 100%; min-height: 1px; }
/* 3) gutters (16px total) */
.row { margin-left: -8px; margin-right: -8px; }
.col { padding-left: 8px; padding-right: 8px; }
/* 4) 12-col widths (mobile-first) */
.col-1 { width: 8.3333%; }
.col-2 { width: 16.6667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333%; }
.col-5 { width: 41.6667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333%; }
.col-8 { width: 66.6667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }
/* 5) breakpoints (Bootstrap-like) */
@media (min-width: 576px) {
 .col-sm-1 { width: 8.3333%; } .col-sm-2 { width: 16.6667%; }
 .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.3333%; }
 .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; }
 .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; }
 .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.3333%; }
 .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
 .col-md-1 { width: 8.3333%; } .col-md-2 { width: 16.6667%; }
 .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; }
 .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; }
 .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; }
 .col-md-9 { width: 75%; } .col-md-10 { width: 83.3333%; }
 .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
 .col-lg-1 { width: 8.3333%; } .col-lg-2 { width: 16.6667%; }
 .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; }
 .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; }
 .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; }
 .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; }
 .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; }
}
<div class="row">
 <div class="col col-12 col-sm-6 col-md-4">...</div>
 <div class="col col-12 col-sm-6 col-md-8">...</div>
</div>

• Toby Speight: Welcome to Code Review! You have presented an alternative solution, but haven't reviewed the code. Please edit to show what aspects of the question code prompted you to write this version, and in what ways it's an improvement over the original. It may be worth (re-)reading How to Answer.