響應式4列圖像網格投資組合

Question

我想只使用html，css和js製作投資組合。列的數量應該是4，並且在調整大小時應該是有響應的。我發現這個代碼是完美的，但問題是它包含多於4列 - http://codepen.io/bradfrost/pen/xkcBn。

有沒有一種方法，使之成爲僅有4 columns..thanks

這裏的CSS

.g { 
     padding: 0.25em; 
      overflow: hidden; 
     } 
     .g li { 
      float: left; 
      width: 50%; 
      padding: 0.25em; 
     } 
     .g img { 
      display: block; 
     } 
     .g li:nth-child(odd) { 
      clear: left; 
     } 

     @media screen and (min-width: 40em) { 
      .g li { 
       width: 33.3333333333333333%; 
      } 
      .g li:nth-child(3n+1) { 
       clear: left; 
      } 
      .g li:nth-child(odd) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 55em) { 
      .g li { 
       width: 25%; 
      } 
      .g li:nth-child(4n+1) { 
       clear: left; 
      } 
      .g li:nth-child(3n+1) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 72em) { 
      .g li { 
       width: 20%; 
      } 
      .g li:nth-child(5n+1) { 
       clear: left; 
      } 
      .g li:nth-child(4n+1) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 90em) { 
      .g li { 
       width: 16.666666666%; 
      } 
      .g li:nth-child(6n+1) { 
       clear: left; 
      } 
      .g li:nth-child(5n+1) { 
       clear: none; 
      } 
     } 

Answer 1

這是我懶的回答你的懶惰。 http://jsfiddle.net/z38g0Le5/

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

<style> 
    .box {width:25%; display:inline-block;} 
</style> 

嚴重有那麼多的資源在那裏......