벽돌 레이아웃으로 원하는 효과를 얻을 수 없습니다.

Question

저는 정말 여기저기서 혼란 스럽습니다. 이 질문은 레이아웃이므로 내 codepen example을 볼 필요가 있습니다.

기본적으로 두 번째 행에 표시되는 경우 두 블록 사이에 거대한 공간이 있습니다. 왜? 그것은 왜 일렬로 정렬되지 않습니까?

이

은 벽돌에 대한 옵션입니다 : 또한

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

, 세 번째 그리드 항목의 폭 바이올린. 이상적으로는, 나는 50 %가되기를 원하며, 모든 div들은 공간에 단단히 묶일 것이다. 내가 사용자 정의 너비를 가지고있는 이유는 다음 행으로 이동하기 전에 최대 너비가 40 %라는 것입니다. 왜? 같은 줄에 있어야합니다. 50 % + 50 % = 100 %이므로 여유가 있습니다. 왜 그걸 망가 졌다고 생각하니? columnWidth의 20 %이지만, 제 제품의 50 %이기 때문에

1) JQuery와 플러그인 https://github.com/desandro/masonry

Answer 1

공간이있다. 50 % 항목은 60 %로 올림됩니다. 따라서 10 %의 추가 공간이 있습니다.

하지만 .grid-sizer {width : 10 %; 50 % 항목을 50 %로 측정 할 수 있습니다.