响应式基于行的网格布局

Question

我建立了一个网站，其中有一个页面，其中包含按行排列的图像网格。 为了说明你可以找到它here，但原则上它看起来像这样：

1. 行高是flexibel。
2. 该行填充屏幕宽度（带边距）。
3. 每行的图像数量不固定，需要根据窗口大小进行更改。
4. 图像的尺寸是任意的。

目前我在js / jQuery中进行所有计算，使得行高在最小高度和最大高度之间，然后我在行之间相应地分配图像，必要时创建或删除新行。在浏览器的resize事件中，我重新计算值并调整图像尺寸，如有必要，将图片从一行移动到另一行。

虽然这适用于桌面屏幕，但我希望切换到也适用于小型（例如移动）屏幕的响应式设计，并且不必像现在那样依赖js / jQuery。

我已经找到了bootstrap和Foundation框架，但是它们都使用了固定数量的总列，这在这里不起作用。

有没有办法实现这一点，甚至只使用CSS？

Answer 1

你知道flexbox吗？例如，您可以根据容器创建一个具有项宽度的容器：

<div class="container" style="width: 100%; margin: 10px; display: flex;">

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;">
    <h1>Test</h1>
    <p>This is a lorem ipsum text</p>
</div>

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;">
    <h1>Test</h1>
    <p>This is a lorem ipsum text</p>
</div>

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;">
    <h1>Test</h1>
    <p>This is a lorem ipsum text</p>
</div>

<div class="item" style="background-color: red; margin: 10px; padding: 10px; flex: 1;">
    <h1>Test</h1>
    <p>This is a lorem ipsum text</p>
</div>


</div>

https://jsfiddle.net/h9yhds8b/

在https://css-tricks.com/snippets/css/a-guide-to-flexbox/

了解详情