rails 画像を横に３枚並べたい

Question

###分からないこと
railsチュートリアルを参考にしてインスタのクローンアプリを作成していますが２点分からないことがあるのでご教授いただきたいです。
１）インスタのユーザーページで画像をアカウント情報のしたに以下のように画像を三列で表示したいです。

しかし現在はこのようになってしまっているのでこれを解消したいです。

２）現在ユーザーページとホームのページがどちらも_micropost.html.erbに繋がってしまっているので
これを分けたパーシャルにしてホーム側はユーザーの投稿一覧がコメント付きで縦にずらっと並ぶようにして
ユーザーページ（show）は画像だけで横に３列で並べたいです。
しかしパーシャルを分けると
undefined local variable or method `micropost' for #<#Class:0x00007fcbbc314b30:0x00007fcbbc31e630>
Did you mean? @micropost
のエラーが出てしまいます。何かいい方法はないでしょうか？
ご教授お願いします。

---

<app/views/users/show.html.erb>

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
  <div class="col-md-8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
       <% @microposts.each do |micropost| %>
        <ol class="col-sm-4">  
         <%= render @microposts %>
        </ol>
      <% end %>  
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

<app/views/microposts/_micropost.html.erb>

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  
  <span class="content">
    <%= image_tag micropost.display_image if micropost.image.attached? %>
    <%= micropost.content %>
    </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
    <% if current_user?(micropost.user) %>
      <%= link_to "削除", micropost, method: :delete,
                                       data: { confirm: "You sure?" } %>
    <% end %>
  </span>
</li>

<app/views/static_pages/home.html.erb>

<% if logged_in? %>
  <div class = "row">
    <aside class = "col-md-4">
      <section class = "user_indo">
        <%= render 'shared/user_info' %>
      </section>
      <section class = "micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
    <div class = "col-md-8">
      <h3>投稿一覧</h3>
      <%= render 'shared/feed' %>
    </div>
  </div>
<% else %>
  <div class="center jumbotron">
    <h1>Welcome to the Sugisutagram</h1>
  
    <h2>
     This page is an Instagram copy page created by Sugiyama.
    </h2>
  
    <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
  </div>
  
  <div class= "cafeimage">
  <%= image_tag("p602.jpg") %>
  </div>
<% end %>  

<app/views/shared/_feed.html.erb>

<% if @feed_items.any? %>

<ol class = "microposts" >
  <%= render @feed_items %>
</ol>
  <%= will_paginate @feed_items,
          params: { controller: :static_pages, action: :home } %>
<% end %>

Answer 1

grid関連はbootstrapなどのフレームワークを利用されていますか？
パッとみた感じだと、Railsの問題というよりCSSの問題です。
利用されているフレームワークのGridシステムを理解してください。

Bootstrap4: https://getbootstrap.jp/docs/4.3/layout/grid/

レスポンシブを無視すると下記のようなイメージです。だいぶ省略しているのと不確定要素がありますが、rowやcolのイメージが伝わればと思います。

app/views/users/show.html.erb

<div class="container">
  <div class="row">
    <div class="col-12">
      <section class="user_info">...</section>
    </div>
  </div>
  <div class="row">
    <%= render @microposts %> <!--このように書いた時はeachは不要だったはずです。-->
  </div>
</div>

app/views/microposts/_micropost.html.erb

<div class="col-4">
  <div>...</div>
</div>

※おそらく折り返してくれるはず。