Фиксированная ширина элементов в адаптивной сетке?

Question

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

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

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

Answer 1

Я не думаю, что есть более общее решение с Jeet-Grid. С помощью cycle а также uncycle это, безусловно, намеченный способ сделать это, хотя вы можете рассмотреть возможность использования медиа-запросов вместо расчета ширины элемента (см. это видео с помощью стилуса).

---

Другой возможностью было бы просто использовать flexbox ( см. Это руководство), просто помните об ограниченной поддержке браузера.

Так, например:

#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... например http://flexboxgrid.com/.