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

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

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

哪种吸取这类问题的一般解决方案？

来源

2015-02-23 user1952811

我不认为有一个更通用的解决方案与捷网格。使用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网格系统。

来源

2015-02-26 22:08:03 pschueller

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

回答

相关问题