grid - パッカリーを使用して流体グリッドのギャップを回避する方法

Question

私はアマチュアで初心者で、同じ高さの縦横の写真用の流動的な画像グリッドを使用して最初の Web ページを作成しようとしています。そのため、Packery JavaScript を適用して応答性を高めています。

Codepen へのリンクを参照してください: http://codepen.io/nor159/pen/WbpWpe/?editors=110

    * {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f0f0f0;
}
img {
width: 100%;
display: block;
}
.packery {
margin: 8% 8% 8% 8%;
}
.packery:after {
content: ' ';
display: block;
clear: both;
}
.item {
float: left;
}
@media screen and  (max-width:400px) {
.item.v, .grid-sizer {
width:  calc(4/14*100%);
}
.item.h {
width:  calc(9/14*100%);
}
.gutter-sizer {
width:  calc(1/14*100%);
}

私は2つの問題を見つけました：

1) 画面のサイズを変更すると、画像間に隙間がランダムに表示されます。

2) Chrome で読み込むと、画像が重なって表示されます。

これを解決する方法を知っている人はいますか？このグリッドは Packery を使用して作成できますか?

私の質問への回答は高く評価されます。

よろしくヤン、オスロ