具有可变列布局的响应网格

Question

有没有办法根据屏幕宽度使用“传统”网格布局来调整列数？

我正在使用众多响应式流体网格系统中的一个 - 例如来自zurb foundation的网格（使用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正是您所寻找的（我知道它在两年前，但也许其他人需要相同的解决方案）。