連続するリストを横並びに等分表示する...レスポンシブへの足がかり

簡単なCSSで連続するリストを横並びに等分表示してみた。プログラマー未満人にはレスポンシブへの足がかりにならないかと...

<div id="item-list">
<ul class="cols-3">
<li>商品01</li>
<li>商品02</li>
<li>商品03</li>
<li>商品04</li>
<li>商品05</li>
<li>商品06</li>
</ul>
</div>

/* 便宜的に...すべての余白を0に、box-sizing を border-boxに
* {  
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#item-list {
  background:#ccc;
  padding:20px 10px 0 10px;
  margin-bottom:20px;
}

#item-list ul{
  margin-left:-20px;/１カラムのpadding分マイナスマージン*/
  overflow:hidden;
  background-color:transparent;
}

#item-list ul li {
  list-style-type:none;
  float:left; /*floatで横並びに*/
  padding-left:20px;/*カラム間のガター*/
  margin-bottom:20px;
  text-align:center;
}

ul.cols-1 li {width: 100%;}
ul.cols-2 li {width: 50%;}
ul.cols-3 li {width: 33.33333%;}
ul.cols-4 li {width: 25%;}
ul.cols-5 li {width: 20%;}
ul.cols-6 li {width: 16.66666%;}
ul.cols-7 li {width: 14.28571%;}
ul.cols-8 li {width: 12.5%;}

.inner{ /*カラムの内側*/
  margin:0;
  height:100%;
  background:white;
}

@media only screen and (max-width: 767px) {
  ul.cols-4 li,ul.cols-5 li,ul.cols-6 li,ul.cols-7 li,ul.cols-8 li{
      width: 33%;/*４列以上は３列に*/
  }
  ul.cols-3 li{
      width:50%;/*３列は２列に*/
  } 
}

@media only screen and (max-width: 479px) {
  ul[class*='cols-'] > li{
      width: 100%;/*すべてを１列に*/
  }
}

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("#item-list ul li").wrapInner("<div class='inner'></div>");
  $("#item-list ul li >.inner").matchHeight();
});
</script>

サンプル
http://qitailang.small.jp/misc/equal_cell/sample2.html