石工レイアウトで希望の効果を達成できません

Question

私は本当にここで困惑しています。これはレイアウトに関する質問ですので、codepen exampleを見る必要があります。

基本的に、2番目の行に表示されている場合は、2つのブロックの間に巨大なスペースがあります。どうして？なぜそれは整列していないのですか？また、第3グリッド項目の幅フィドル

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

：

これは石工のオプションです。理想的には、私はそれが50％になりたいと願っています。私はそれにカスタム幅を持っている理由は、それが次の行に移動する前に最大幅は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％で測定できるようになります。