Responsive design 用网格调整网格中柱的大小 我一直在与Zurb基金会合作，评估它是否适合我的下一个项目。在调整浏览器宽度时，我偶然发现了一个我不习惯的特性，因此我想确认是否有任何方法可以做到这一点

假设我有一个网格，每行有四个图像（“列”）。当我缩小浏览器窗口的宽度时，我的自然期望是，随着宽度的减小，每行的图像数量将缩小到前三个，然后是两个，最后是一个图像

<>但是，基金会似乎是在尽可能多地缩小div以保持每行四列，并且当它耗尽空间时，有四个直接跳到每行一个图像。

这种行为对我来说是不符合逻辑的，所以我认为一定有办法做到这一点，但经过仔细研究，我找不到一种方法，无论是使用div还是块网格

我假设这是响应网格的101个功能，但我对这些css框架没有太多经验。因此，我是否必须开始编写自己的媒体查询，以实现每行列数的逐渐减少

---

谢谢

Foundation不会强制内容具有响应性或流动性，但网格本身是。它的流动性下降到某个点，12列网格塌陷到移动网格。（假设默认网格设置）

但是，只需将所有图像左移到一列中，就可以获得所需的行为

比如：

然后尝试添加最小和最大宽度以满足您的需要

img {float:left; width:24%; min-width:100px; max-width:300px;}

---

我也有同样的问题，这就是我如何找到这个条目。 我知道这个问题已经解决了，但我只想分享我的答案。 块网格为我工作。 见高级部分

在我的HTML中，我只是添加了一些类来指定在不同屏幕大小上每行需要多少项，如下所示：

<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
        <img src="images/sample1.jpg" width="640" height="480">
    </li>
    <li>
      ...
    </li>
</ul>

...

---

在这里，我希望每行在小型设备中显示1个项目，在中型设备中显示2个项目，在大型设备中显示3个项目。我在_app.scss中启用了“基础/组件/块网格”。成功了！：）

是的，看来这应该是解决问题的办法。我以为这可以通过网格来实现，但我猜不行。生活和学习。

<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
        <img src="images/sample1.jpg" width="640" height="480">
    </li>
    <li>
      ...
    </li>
</ul>