響應網格中的固定寬度項目？

我有一些固定寬度的元素，我想製作一個網格。唯一的問題是我希望它能夠響應。基本上可以有一行中的項目數量，然後隨着空間變小將項目移動到第二行。響應網格中的固定寬度項目？

我正在使用像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

響應網格中的固定寬度項目？

回答

相關問題