Невозможно добиться желаемого эффекта при масонской макете

Question

Я действительно в тупике. Поскольку это вопрос макета, вам нужно посмотреть на мой codepen example.

В основном, если вы видите во втором ряду, между двумя блоками существует гигантское пространство. Зачем? Почему он не выстраивается в линию?

Это варианты для кладки:

$('.grid').masonry({ 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-sizer', 
    percentPosition: true 
}); 

Кроме того, скрипка с шириной третьей сеткой-элемент. В идеале, я хочу, чтобы он составлял 50%, и все мои divs будут вписываться в пространство, плотно упакованные. Причина, по которой у меня есть пользовательская ширина, заключается в том, что 40% - это максимальная ширина, прежде чем она переместит ее в следующую строку. ЗАЧЕМ? Он должен быть в одном ряду. 50% + 50% = 100%, поэтому есть место. Почему вы думаете, что он сломан?

1) JQuery плагин https://github.com/desandro/masonry

Answer 1

Пространство есть, потому что ColumnWidth составляет 20%, но первый элемент 50%. 50% -ный предмет округляется до 60%. Таким образом, на 10% больше места.

Но если вы измените .grid-sizer {width: 10%; }, что позволит измерять 50% -ный предмет на уровне 50%.