Question

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

我使用像jeet.gs这样的框架，它提供了这个非常有用的函数，叫做＆＃34; cycle＆＃34;您可以使用它来指定连续所需的项目数量，并自动为您创建网格。唯一的问题是，为了使这个响应，意味着连续4个项目到3个项目，我需要进行如下的计算（itemWidth * 4），然后做uncycle: 4和cycle: 3。

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

Answer 1

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

另一种可能性是简单地使用flexbox代替see this guide），只需要注意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。

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

1 个答案: