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

Posted 2023-03-06

【中文标题】响应式网格中的固定宽度项目？

【英文标题】：Fixed width items in a responsive grid?

【发布时间】：2015-04-24 09:27:13

【问题描述】：

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

我正在使用像 jeet.gs 这样的框架，它提供了一个非常有用的功能，称为“循环”，您可以使用它来指定您想要连续的项目数量，它会自动为您创建一个网格。唯一的问题是，为了使这个响应，意味着从 4 个项目到 3 个项目，我需要进行如下计算（itemWidth*4），然后执行 uncycle: 4 和 cycle: 3。

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

【参考方案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。