rails 横並びに掲載したいです。どうすればよいでしょうか

Question

お世話になります。
rails 初心者です。

現在、レシピブログを作成中です。
indexページにrecipeモデルに保存された内容を表示したいのですが、
縦並びになってしまいます。.eachメソッドのloopでは無理なのでしょうか。!
現在、掲載が崩れてしまっていて困っています。

現在のコード
<index.html.erb>

<h1>ALL Recipe</h1>

    <% @recipes.each do |recipe| %>
            <%=link_to recipe do%>
              <%= image_tag recipe.image.url (:thumb)  %>
            <% end %>
            <h2><%=link_to recipe.title,recipe %></2>
  <% end %>

どうぞよろしくお願い致します。

Answer 1

bootstrapのグリッドシステムを利用してはいかがでしょうか？

以下のqiitaの記事を参考にrailsにbootstrapを導入してみてください。
lessではなくsassをオススメします。
https://qiita.com/shizuma/items/83cdadbe0a629f1f74d1

以下のコードはグリッドシステムを使ったコードの例です。
画像の要素が3個横並びに表示されます。

<div class="row">
          <% @listings.each do |listing| %>
          <div class="col-md-4">
             <div>
                <%= link_to listing_path(listing) do %>
                  <%= image_tag listing.main_photos[0].image.url,class:"image-s" %>
                <% end %>
             </div>
           </div>
         <% end %>
</div>

bootstrapのグリッドシステムは慣れていないと難しいかもしれませんが今後必要になる場面が必ずあると思うのでぜひ使ってみてください。

Answer 2

HTML, CSS の話なので一度静的 HTML でレイアウト（３品２行以上）を作成して、
どの部分を each で繰り返せば良いのかを検討されてはいかがですか？

Comments

[Marge0101]

bootstrapの table　を使用するようなイメージでしょうか？

[hogeratta]

そうですね、table を使用するなら tr の each になりますね。
div を使用するなら CSS でのレイアウトが必要になります。