View photos like Pinterest

Introduction

A fledgling engineer who is making a highly acclaimed portfolio

I am making a photo posting site dedicated to used clothing like Instagram

At that time, I struggled to arrange the photos like the site Pinterest (https://www.pinterest.jp/) on the photo posting list screen, so I would like to keep it as a memorandum.

code

before

ruby:post.html.erb

 <div class = contents-row >
    <% @items.each do |item| %>
      <ul class='item-lists'>
          <li class='list'>
              <%= link_to items_path(item.id), method: :get do %>
                <%= image_tag(item.image, class:"item-img") %>
              <% end %>
          </li>
      </ul>
    <% end %>
  </div>

post.scss

.contents-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 95vw;
}

.item-lists {
  margin: 5px;
}

.list {
  width:25vw;
}

.item-img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  vertical-align: bottom;
}

after

ruby:post.html.erb

 <div class = contents-row >
  <ul class='item-lists'>
    <% @items.each do |item| %>
          <li class='list'>
              <%= link_to items_path(item.id), method: :get do %>
                <%= image_tag(item.image, class:"item-img") %>
              <% end %>
          </li>
    <% end %>
  </ul>
  </div>

post.scss

.contents-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 95vw;
}

.item-lists {
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
 }
 
.list {
  width:25vw;
}

.item-img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  vertical-align: bottom;
  margin: 5px;
}

What went

• [html] The ul tag was included in the each statement, so I put it outside the each statement. • [css] Describe column-count etc. in item-lists and adjust each according to it

Reference site

https://designsupply-web.com/media/suplog/1862/

https://www.pinterest.jp/