CSSで画像を一列に表示する方法

Question

実現したいこと

Ruby on Railsを使って写真を表示するWebページを作っています.
写真を1列並べたあと, 2列目に移動し写真を並べ, 次に3列目に...というデザインにしたいと考えています.

手書きで申し訳ありませんが, この画像のようなイメージです.

発生している問題

それぞれの写真をどのように管理するか(どのようにidを振るか?)ということ. 写真1枚1枚の位置が違うので, CSSにおいてどのように記述すればよいのかが分かりません.

回答してくださると助かります.
よろしくお願いします.

以下ソースコードになります.
CSSはほとんど手をつけていない状態です.

show.html.erb

  <% if @user.microposts.any? %>
        <p><%= render @microposts %></p>
  <% end %>

_micropost.html.erb

<%= link_to(image_tag(micropost.imgurl, style: "width: 100px;height: 100px;display: inline-block;"), micropost.url, class:"??") %>
<%= micropost.title %>

Comments

[kei344]

ご自身で試されたコード（HTML/CSS）を質問文にコードブロックで追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

<article id="list">
  <figure>
    <img src="https://placehold.jp/150x150.png" alt="写真１">
    <figcaption>写真１のタイトル</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.jp/150x150.png" alt="写真２">
    <figcaption>写真２のタイトル</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.jp/150x150.png" alt="写真３">
    <figcaption>写真３のタイトル</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.jp/150x150.png" alt="写真４">
    <figcaption>写真４のタイトル</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.jp/150x150.png" alt="写真５">
    <figcaption>写真５のタイトル</figcaption>
  </figure>
</article>

#list {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-column-gap: 20px;
}

#list figcaption {
  width: 150px;
}

追記 Flexbox版

#list {
  display: flex;
  flex-wrap: wrap;
  width: 570px;
}

#list figure {
  margin: 20px;
}

#list figcaption {
  width: 150px;
}

Comments

[root_jp]

写真のタイトル表示を見落としてまして、考慮に入れてませんでしたので編集しました。

[macaron_xxx]

figcaption
勉強になります。

[Neemsk]

root_jp様, 回答ありがとうございます。
ただ私の環境で grid-template-columns を入力すると, unknown propertyと表示されていまい, 3つ横に表示されず, 縦に表示されてしまうのですが, どのように変更すればよいでしょうか.
Chrome上でcloud9を使って開発しています.

[root_jp]

回答に追記しました。
こちらの書き方ではどうでしょうか？

[Neemsk]

root_jp様, 無事実装できました.
ありがとうございます.

Answer 2

丸投げ質問ですので、キーワードだけ。

<div class="wrapper">
  <div class="photo">
    <img class="img" />
    <span class="img-title">Title</span>
  </div>
  <div class="photo">
    <img class="img" />
    <span class="img-title">Title</span>
  </div>
  <div class="photo">
    <img class="img" />
    <span class="img-title">Title</span>
  </div>
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
}