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

【问题标题】：Responsive grid with variable column layout具有可变列布局的响应式网格
【发布时间】：2012-11-29 01:15:42
【问题描述】：

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

我正在使用许多响应式流体网格系统之一 - 例如来自 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 媒体查询调整列数。

有什么方法可以轻松更改列数？也许使用javascript？

我确定肯定已经有一个可以通过这种方式自定义的网格系统，但我还没有找到。

【问题讨论】：

标签： javascript html css grid responsive-design

【解决方案1】：

您可能想看看semantic grid。原因是所有内容都在 css 文件中定义，而不是标记。它确实使用 LESS，所以这对您来说可能是个问题。

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

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

尽管这不是您要求解决的方法，但我相信它会为您解决问题。

您还说要使用多少列。

【讨论】：

非常有趣，我会阅读这个。我使用 LESS 或 SCSS 没有问题，它仍然是纯 css。

【解决方案2】：

在 Foundation 中查看 Block Grid：http://foundation.zurb.com/docs/components/block_grid.html

【讨论】：

【解决方案3】：

试试 skeljs 太棒了。它会做你想做的事。

【讨论】：

【解决方案4】：

http://gridsetapp.com 正是您正在寻找的（我知道这是两年前的事了，但也许其他人需要相同的解决方案）。

【讨论】：