Is there a way to center justify the masonry grid items?
I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side:
<div class="wrap">
<div class="parent grid">
<div class="grid-item"><div>1</div></div>
<div class="grid-item"><div>2</div></div>
<div class="grid-item"><div>3</div></div>
<div class="grid-item"><div>4</div></div>
<div class="grid-item"><div>5</div></div>
</div>
</div>
CSS:
* {
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 > div {
width: 200px;
height: 100px;
background: white;
margin:5px;
padding:20px;
display: inline-block;
}
.parent > div > div {
font: bold 30px Arial, Sans-serif;
color: white;
width: 50px;
height: 50px;
background: #FAB400;
border-radius: 50%;
padding: 9px;
text-align:center;
}
Check out the code on jsfiddle
My goal is to achieve a layout similar to this:
https://i.sstatic.net/rZGqN.png
Do you think it's possible to accomplish this design?