Masonry - how to stop Masonry floats all my grid items to left?
<p>How can I justify masonry grid items to centre?</p>

<p>It seems that Masonry floats all my grid items to left or justifies the content to left:</p>

<pre><code> &lt;div class="wrap"&gt;
  &lt;div class="parent grid"&gt;
    &lt;div class="grid-item"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
    &lt;div class="grid-item"&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;
    &lt;div class="grid-item"&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;
    &lt;div class="grid-item"&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;
    &lt;div class="grid-item"&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
    box-sizing: border-box;
    font-family: Arial, Sans-serif;
}

.wrap {
    background: #FFD54F;
    text-align: center;
}

.parent {
    text-align: center;
    width: 600px;
    display: inline-block;
    border: 1px solid black;
}

.parent &gt; div {
    width: 200px;
    height: 100px;
    background: white;
    margin:5px;
    padding:20px;
    display: inline-block;
}

.parent &gt; div &gt; div {
    font: bold 30px Arial, Sans-serif;
    color: white;
    width: 50px;
    height: 50px;
    background: #FAB400;
    border-radius: 50%;
    padding: 9px;
    text-align:center;
}
</code></pre>

<p><a href="https://jsfiddle.net/w2bdebfL/" rel="nofollow noreferrer">jsfiddle</a></p>

<p>What I am trying to achieve is this:</p>

<p><a href="https://i.stack.imgur.com/rZGqN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rZGqN.png" alt="enter image description here"></a></p>

<p>Is it possible?</p>