Question

我是JS的新手，我正在努力寻找在Zurb Foundation 4框架上创建响应式自定义网格布局的解决方案。

对于较大的块将有一个设置的大小，较小的块将填充在它周围，但在这种类型的模式中，因为添加了更多的div。

但是在移动布局中，它们都会变成相同的大小和堆叠。

我一直在搞乱mason.js和jQuery砌体，但我没有运气。这些中的任何一个都可以解决我的问题，还是我还应该研究一些其他问题？

Answer 1

您可以使用嵌套行和使用其他网格类（例如“small- ”，“large - ”，push，pull等）进行类似的布局

我知道你提到了一个JavaScript解决方案，但我想我会提供一个粗略的Html / CSS选项。

<div class="row">
    <div class="large-2 columns">
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
    </div>
    <div class="large-5 columns"></div>
    <div class="large-5 columns"></div>
</div>

<div class="row">
    <div class="large-4 columns"></div>
    <div class="large-8 columns">
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
    </div>
</div>

这是一个非常粗略的jsFiddle示例

显然，有些人会使用列数并可能自定义边距。我确实删除了媒体查询，因为结果窗口对我起了诡计。

希望这有助于两种方式。

Answer 2

我写了一个插件就是这样做的。查看www.masonjs.com，它应该完全符合您的要求！干杯！

用什么来在Zurb Foundation上创建自定义网格布局

2 个答案: