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

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，因此这对您来说可能是个问题。

此外，您可以按百分比制作网格，这将解决

Is there any way to adapt the number of columns depending on the screen width using a "traditional" grid layout?

即使这不是您要求修复的方法，我相信它会为您解决问题。

您还可以说明要使用多少列。