Как сделать сетку из 5 колонок используя foundation?

Question

[fte]

Уже сломал голову...

Задача:

Сделать сетку из 5 колонок и 4 рядов фиксированной ширины (боксы с фиксированной шириной) при максимальном разрешении 1920px.
При уменьшении ширины количество колонок подстраивается под текущее разрешение.
Например, при ширине в 1366 - три колонки.
Дальше две и в итоге одна.

При этом сами боксы размеров не меняют, что должно меняться так это их расположение, заполняя 100% пространства (минус отступы)

Пытаюсь так:

<div class="row product-grid">
<div class="small-2 columns product-card">
</div>
<div class="small-2 columns product-card">
</div>
<div class="small-2 columns product-card">
</div>
<div class="small-2 columns product-card">
</div>
<div class="small-2 columns product-card">
</div>

Нифига, почему максимальная ширина .row меньше, чем ширина экрана, например, при ширине 1920 ширина .row 1904, при 1366 - 1350.

Не понимаю в чем проблема...

Использую foundation 5.

Вот именно пятая колонка ведет себя странно, все остальные меняются как нужно:

Answer 1

[srko]

Я не совсем понял вопрос. Но вам, мне кажется, стоит использовать Block Grid вместо просто сетки.

А ширину .row вам нужно править в CSS (или SCSS), там для больших экранов специально заданы отступы, которые, если мне не изменяет память, убираются на маленьких экранах.

Comments

[fte]

Спасибо за наводку со списками. Но вопрос решил с помощью masonry js.

Answer 2

[Emperor]

Пятая колонка ведет себя так, потому что она последняя в ряду (колонок же 5).
А в Foundation это значит float: right.
В css media для мелких экранов пропишите float: none.
А так да, для этого удобнее всего использовать block-grid с указанием количества колонок для каждого размера.