7
\$\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\$ 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\$ 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\$ Commented May 11, 2020 at 1:28
  • 1
    \$\begingroup\$ learncssgrid.com \$\endgroup\$ Commented May 12, 2020 at 18:41

1 Answer 1

Reset to default
-1
\$\begingroup\$

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>
\$\endgroup\$
1
  • 2
    \$\begingroup\$ 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. \$\endgroup\$ Commented Aug 29 at 12:13

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.