Railsでデータベースの記事を表示したい(初学者です)

Question

前提・実現したいこと

Postテーブルのデーターを下の画像のように横に並べて三つずつ表示したいです。

下の"New posts"以下に記事を一列三つの記事で表示していきたいのですが現状の状態は一列に六つに収まっています。

該当のソースコード

 def index
    @new_posts = Post.order('created_at DESC').limit(6)
 end

```コントローラーでは六つの記事を新しい順で**postテーブル**から**@new_posts**に代入。
```html
<div class ="posts">
    <% @new_posts.each do |post|%>
      <div class ="posts__container">  <%= image_tag post.image, class: 'image'%> </div>
    <% end %>
  </div>
```eachメソッドで**@new_posts**を呼び出し**posts__container**にブロック変数**postのimage**を配置。
```css
  posts__container{
    width: 32%;
    background-color: white;
    border-radius: 10px;
}
```**posts__container**は親要素に対して32%で均等に配置されるように横幅を指定。

### 試したこと
仮説❶controllerのなかでメソッドを使って**三つ取得したら改行**みたいなメソッドを書く。
仮説❷htmlのなかに**if文を入れて三つ目で改行をtrueにする。**
仮説❸cssでposition を使ってcontainerを固定してみる。

どんなコードの書き方(each文を使わなくても表示させる方法)などご教授いただきたいです。
よろしくお願いします。
### 補足情報（FW/ツールのバージョンなど）

ruby '2.6.5'
gem 'rails', '~> 6.0.0'

Answer 1

flexboxを使うと楽かと思います。

.posts {
  display: flex;
  flex-wrap: wrap;
}
.posts__container {
  flex: 0 0 33.3%;
  max-width: 33.3%;
}

Comments

[tatuya1336]

ご回答ありがとうございます！無事flexboxで解決できました！