具有可變列布局的響應式網格

Question

是否有任何方法根據使用「傳統」網格佈局的屏幕寬度來調整列數？

我正在使用衆多響應流體網格系統之一 - 例如zurb基礎的網格（使用12列）。

說我作出這樣的跨越頁三列：

<div class="row"> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
</div> 

說，在某個轉折點（屏幕寬度），我想我的表現在四列，而不是三個內容。

<div class="row"> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
    <div class="three columns"></div> 
</div> 

對於更大的屏幕也許更多，也許只有兩列稍小一些。

問題是 - 使用此網格（或具有類似標記的其他網格），我必須更改標記 - 並且據我所知，我無法調整使用css mediaqueries的列數。

有什麼方法可以輕鬆地更改列數？也許使用JavaScript？

我確定必須有一個可以用這種方式定製的網格系統，但我還沒有找到。

Answer 1

你可能想看看semantic grid。原因是所有內容都是在css文件中定義的，而不是標記。它確實使用LESS，因此可能會成爲您的問題。

而且，可以使上個網格，這將解決

有什麼辦法，以適應視使用「傳統」的網格佈局屏幕寬度的列數？

即使這不是你要求解決的方法，我相信它會解決你的問題。

你也說你想使用多少列。

Answer 2

結帳的塊網格在基金會：http://foundation.zurb.com/docs/components/block_grid.html

Answer 3

嘗試skeljs這是真棒。它會做你想要的。

Answer 4

http://gridsetapp.com將正是你所期待的（我知道這是兩年前，但也許別人需要相同的解決方案）。