I now use a grid system similar to that of the one created by Andr Lus 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>
Simple mobile-first/responsive Grid System (w/ IE8 Support)
css;css3