Impossible d'obtenir l'effet désiré avec maçonnerie

Question

Je suis vraiment perplexe ici. Comme il s'agit d'une question de mise en page, vous devrez regarder mon codepen example. En gros, si vous voyez sur la deuxième rangée, il y a un espace géant entre les deux blocs. Pourquoi? Pourquoi ne s'aligne-t-il pas?

Ce sont les options pour la maçonnerie:

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

En outre, le violon à la largeur de la troisième grille-point. Idéalement, je veux que ce soit 50% et tous mes divs vont s'emboîter dans l'espace, emballés étroitement. La raison pour laquelle j'ai la largeur personnalisée est que 40% est la largeur maximale avant de la déplacer vers la ligne suivante. POURQUOI? Il doit être sur la même ligne. 50% + 50% = 100% donc il y a de la place. Pourquoi pensez-vous que c'est cassé?

1) JQuery plugin https://github.com/desandro/masonry

Answer 1

L'espace est là parce que le columnWidth est de 20%, mais le premier élément est de 50%. un article de 50% est arrondi à 60%. Donc, il y a 10% d'espace supplémentaire.

Mais si vous changez .grid-sizer {width: 10%; } qui permettra de mesurer 50% de l'article à 50%.