Элементы с фиксированной шириной в чувствительной сетке?

Question

У меня есть фиксированные элементы ширины, которые я хотел бы сделать сеткой. Единственная проблема в том, что я хочу, чтобы она была отзывчивой. В основном есть столько элементов, сколько может быть в одной строке, а затем перемещать элемент во вторую строку, поскольку пространство становится меньше.

Я использую фреймворки, такие как jeet.gs, и предоставляет эту очень полезную функцию под названием «цикл», которую вы можете использовать, чтобы указать количество элементов, которые вы хотите в строке, и автоматически создаст сетку для вас. Единственная проблема заключается в том, чтобы сделать это отзывчивым, имея в виду переход от 4 элементов к 3 элементам в строке. Мне нужно выполнить вычисления, как показано ниже (itemWidth * 4), затем сделать uncycle: 4 и cycle: 3.

Какой вид отстой любого общего решения для такого рода проблем?

Answer 1

Я не думаю, что существует более общее решение с сеткой jeet. Использование 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.