Rails: загрузка изображений и выравнивание как галерея

Question

Я загружаю изображения из разработанного мной рельсового приложения, и внутри edit form загруженные в данный момент изображения отображаются только в одной строке:

Это настройкаУ меня есть:

 <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>

и это 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

Но я хочу, чтобы изображения выглядели выровненными в виде галереи изображений, как показано ниже.Любая идея, как это можно исправить?

Answer 1

Попробуйте этот обновленный CSS.Добавлено flex-wrap: wrap; и удалено justify-content: center из container-image div.Также удалите поля по умолчанию из тела.

 
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>