Rails: Upload images and align as a gallery - css

Question

I'm uploading images from a rails app I have developed and inside the edit form the currently uploaded images appear in one line only:
This is the setup I have:
<div class="container-image">
<% #attachments.each do |attachment| %>
<div class="item-image">
<div class="pinImage">
<%= image_tag(attachment.image.url(:mini))%>
<p style="font-size: 13px;">
<%= link_to "Remove", remove_item_attachment_path(attachment),
data: { confirm: "Are you sure?"},
:method => :delete %></p>
</div>
</div>
<% end %>
</div>
and this is the css:
.pinImage img
width: 100%
height: auto
border: 1px solid #d9d9d9
border-radius: 6px
background-color: white
.container-image
max-width: 1200px
display: flex
align-items: center
-webkit-justify-content: center
/* Safari */
justify-content: center
.item-image
padding: 5px
display: block
But I want the images to appear aligned as an image gallery like the following. Any idea how a can fix this?

Answer 1

Try this updated CSS. Added flex-wrap: wrap; and removed justify-content: center from container-image div. Also remove default margins from body.
body {
margin: 0;
}
.pinImage img {
width: 100%;
height: auto;
border: 1px solid #d9d9d9;
border-radius: 6px;
background-color: white;
}
.container-image{
max-width: 1200px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item-image{
display: block;
width: 25%;
}
<div class="container-image">
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
</div>