响应式网格中的固定宽度项目？

Question

我有固定宽度的元素，我想制作一个网格。唯一的问题是我希望它能够响应。基本上在一行中有尽可能多的项目，然后随着 space 变小，将项目移动到第二行。

我正在使用像 jeet.gs 这样的框架，它提供了一个非常有用的功能，叫做 "cycle"，你可以用它来指定你想要的连续项目的数量，它会自动创建给你一个网格。唯一的问题是要使其具有响应性，这意味着从连续 4 个项目变为 3 个项目，我需要进行如下计算 (itemWidth*4)，然后执行 uncycle: 4 和 cycle: 3。

对于这类问题，哪种通用解决方案很糟糕？

Answer 1

我认为 jeet-grid 没有更通用的解决方案。使用 cycle 和 uncycle 当然是预期的方法，尽管您可能想考虑使用媒体查询而不是计算项目宽度（请参阅 this video 使用手写笔）。

另一种可能性是简单地使用flexbox instead (see this guide), just be aware of limited browser support。

例如：

#wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    width: 150px;
    height: 150px;
    background-color: green;
    margin: 10px;
}

<div id="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

还有基于flexbox的网格系统...例如flexboxgrid.com.

响应式网格中的固定宽度项目？

Fixed width items in a responsive grid?

css

responsive-design

sass

grid-layout

jeet-grid