Simple mobile-first/responsive Grid System (w/ IE8 Support)

Question

I now use a grid system similar to that of the one created by André Luís located here: http://andr3.net/blog/post/142 and evolved by Lea Verou located here: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Made my first grid system supported back to IE8 if respond.js is used (or another method such as modernizr, etc.)

This was made really just for use in a project I'm working on, so it's not as robust as it could be, but figured I'd share it and see what others thought of it.

It's also in a gist: here

  /*********************

    Stupid Simple Grid

  *********************/

  /* fix box-model */
  .row,.col,
  .row:after,.col:after,
  .row:before,.col:before{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box}

  /* clearfix */
  .row{*zoom:1}
  .row:before,
  .row:after{
    display:table;
    content:"";
    line-height:0}
  .row:after{clear:both}

  .row{
    padding:0;
    margin:0;} /* should probably put *zoom:1; here but for clarity it's separated*/
  ul.row,
  li.col{list-style-type:none}
  .col{float:left}
  .col,
  .fill{width:100%}

  /* grid mq */
  @media (min-width:30em){
    .col:not(.fill){width:50%}
    .col.third:nth-child(3),
    .col.fifth:nth-child(5),
    .col.fourth+div:nth-child(3).fill,
    .col.fifth+div:nth-child(3).fill{width:100%}
    .col+.fill{width:50%}

  }
  @media (min-width:50em){
    .col.half{width:50%}
    .col.half+.fill{width:50%}
    .col.third,
    .col.third:nth-child(3){width:33.333%}
    .col.third+.fill{width:66.666%}
    .col.fourth{width:25%}
    .col.fourth+.fill{width:75%}
    .col.fourth+div:nth-child(3).fill{width:50%;}
    .col.fifth,
    .col.fifth:nth-child(5){width:20%}
    .col.fifth+.fill{width:80%}
    .col.fifth+div:nth-child(3).fill{width:60%;}
    .col.fifth+div:nth-child(4).fill{width:40%;}
  }



/* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */
@media (min-width:30em){
  .row>.col{width:50%}
  .row>.fill.col{width:100%}
  .row>.half.col+.fill,
  .row>.third.col+.fill,
  .row>.fourth.col+.fill,
  .row>.fifth.col+.fill,
  .row>.fifth.col+div+div+.fill{width:50%}
  .row>.fourth.col+div+.fill,
  .row>.fifth.col+div+.fill,
  .row>.third.col+div+div,
  .row>.fifth.col+div+div+div+div{width:100%}
}
@media (min-width:50em){
  .row>.third.col,
  .row>.third.col+div+div{width:33.333%}
  .row>.third.col+.fill{width:66.666%}
  .row>.fourth.col{width:25%}
  .row>.fourth.col+.fill{width:75%}
  .row>.fourth.col+div+.fill{width:50%}
  .row>.fifth.col+.fill{width:80%}
  .row>.fifth.col,
  .row>.fifth.col+div+div+div+div{width:20%}
  .row>.fifth.col+div+.fill{width:60%}
  .row>.fifth.col+div+div+.fill{width:40%}
}






  /*******************

  demo specific styles

  *******************/

  html,body{
    font: 300 16px/1.2 "HelveticaNeue-Light",
                       "Helvetica Neue Light",
                       "Helvetica Neue",
                       Helvetica,
                       Arial,
                       "Lucida Grande",
                       sans-serif}
  h1{
    font-family:inherit;
    font-size:1.25em;
    font-weight:800}
  h1,p{margin:0 0 5px}
  .row{margin-bottom:.313em}
  .col{
    background-color:slategray;
    border:.063em solid white;
    color:white;
    padding:.188em .438em}

  <script type="text/javascript" src="//scottjehl.github.io/Respond/dest/respond.src.js"></script>
  <h1>Grid System</h1>
  <p>Simple basic grid</p>

  <!-- two 50% columns (e.g. 1/2) -->
  <div class="row">
    <div class="col half">1/2</div>
    <div class="col half">1/2</div>
  </div>

  <!-- three 33.333% columns (e.g. 1/3rd) -->
  <div class="row">
    <div class="col third">1/3</div>
    <div class="col third">1/3</div>
    <div class="col third">1/3</div>
  </div>

  <!-- four 25% columns (e.g. 1/4th) -->
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
  </div>

  <!-- five 20% columns (e.g. 1/5th) -->
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
  </div>

  <p>Fill remaining space of row</p>

  <!-- fill remaining space -->
  <div class="row">
    <div class="col fill">Fill</div>
  </div>
  <div class="row">
    <div class="col half">1/2</div>
    <div class="col fill">Fill</div>
  </div>
  <div class="row">
    <div class="col third">1/3</div>
    <div class="col fill">Fill 2/3</div>
  </div>
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fill">Fill 3/4</div>
  </div>
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fill">Fill 2/4</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 4/5</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 3/5</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 2/5</div>
  </div>

Answer 1

Writing a "grid system" in vanilla CSS in this day and age is pure folly. Using unsemantic class names that express how an element should look rather than what its purpose is goes against the best practices that have been preached for the past 15 years.

If you want to make a grid system, use a CSS preprocessor. This will satisfy users who prefer to follow the best practices as well as those who spurn them: both groups of users will be able to decide for themselves what their selectors should look like.