rails 投稿後の記事の並びについて

Question

現在記事投稿後の記事を最初の４つの記事は横並びにして5つ目の記事は４つ目の記事の下にに順々追加していくようにしたいのですが、どのようにすればよろしいでしょうか？

記事が横に４、縦に３列を作りたいです。

４つ目の記事投稿画面

５つ目記事投稿画面

tweets_controller

  def index
    @tweets = Tweet.includes(:user)
  end

.Sign-in
  投稿一覧
  .Top
    - @tweets.each do |tweet|
      .article
        = link_to tweet_path(tweet.id) ,class: "article-link" do
          = image_tag tweet.image.url,class: "article-uplord-image"
          %br/
          .article-title
            = tweet.title

.Sign-in{
  margin: 0px 80px 0px 80px;
  background-color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 30px;
}
.Top{
  padding-top: 30px;
  margin: 0px 30px 0px 30px;
  display: flex;
  justify-content: center;
}
.article{
  width: 200px;
  height: 200px;
  margin: 0px 10px 0px 10px;
}

.article-link{
  text-decoration: none;
}
.article-uplord-image{
  width: 200px;
  height: 150px;
}
.article-title{
  text-align: center;
  
}

.view{
  margin: 0px 80px 0px 80px;
  background-color: white;
}

Answer 1

cssの.Topにflex-wrap: wrap;とwidth又はmax-widthを追加し調整するとよいかと思います。

---

気になること

• .Topというクラス名からは、記事以外のものが含まれている可能性がある.articlesあたりが無難かと
• "article-uplord-image" upload

Answer 2

HTML/CSSで解決できると思います。

.images
  - @tweets.each do |tweet|
    .article
      = link_to tweet_path(tweet.id) ,class: "article-link" do
        = image_tag tweet.image.url,class: "article-uplord-image"
        %br/
        .article-title
          = tweet.title 

.images{
  display: flex;
  flex-wrap: wrap
}
.article{
  width: 25%
}

flex-wrapは親要素の横幅いっぱいになった段階で子要素を折り返して表示する機能です。
子要素の横幅を25%とすることでちょうど４つ分表示できます。

padding, marginなどのデザインは調整してみてください。

縦３列の実現はページネーションを使うか、コントローラ側で3×4=12個以上のレコードは取得しないよう工夫すると良いかと。
後者であれば下記のとおりですね。

def index
　 @tweets = Tweet.includes(:user).limit(12)
end

※エディタなしで書いているので誤字あるかもしれません。エラー出たらすみません。
解決できない場合は返信ください。