Rubyで表を作成したい

Question

前提・実現したいこと

Rubyで開発をしています。
以下のようにフロント側で表(横6: 縦：制限なし)を作成して、表示したいのですが良いロジックが思い浮かびません。
どなたかお力を貸していただけると有り難いです。

理想：HTML

HTML上は以下のような状態にしたい。

<ul>
    <li style="background-color:#10efc"></li>
    <li style="background-color:#ff624e"></li>
    <li style="background-color:#CCDDCC"></li>
    <li style="background-color: rgb(30, 255, 100)"></li>
    <li style="background-color:#FFC6A4"></li>
    <li style="background-color: rgb(80, 80, 255)"></li>
</ul>
<ul>
    <li style="background-color:#10efc"></li>
    <li style="background-color:#ff624e"></li>
    <li style="background-color:#CCDDCC"></li>
    <li style="background-color: rgb(30, 255, 100)"></li>
    <li style="background-color:#FFC6A4"></li>
    <li style="background-color: rgb(80, 80, 255)"></li>
</ul>

現在のソースコード

現状のソースでは、<li>要素をループで回しているだけなので、配列の要素分ただ<li>が増えていくだけになります。
これを**「一定回数ループを回したら、次の<ul>を生成して残りの配列の要素を<li>に入れる」**といった形式にしたいと思っています。

<ul>
    <% @user.posts.each do |post| %>              
         <li style="<%="background-color:#{post.colorcode}" %>"></li>
    <% end %>
</ul>

自分なりにやったこと

ある一定回数までループを回した時の判定は、each_with_indexを使用し、indexが6の時に
次のul要素に入れるといったことを試しましたが、理想の形にはなりませんでした、、、
お力を貸していだだける方お願いします。

Answer 1

li要素のデザインをdisplay-inlineにしたらフロント側で自分の理想とする形となりました。
（DOM構成は違いますが、画面幅を超えず折り返されるので）
難しく考えすぎていたようです。回答頂いた方ありがとうございました。

Answer 2

li要素のデザインをdisplay-inlineにしたらフロント側で自分の理想とする形となりました。
（DOM構成は違いますが、画面幅を超えず折り返されるので）
難しく考えすぎていたようです。回答頂いた方ありがとうございました。

Answer 3

二重のループにすればいいのでは？

Comments

[ysdeko]

と最初は思ったんですが、postsの階層的にできないです。
以下のような感じなので
posts[
id: 1,
name: "sample",
]

[otn]

↑これだとループしないのでは？？

まあ、eachを書けばループはするか。
colorcodeは？？

[ysdeko]

省略してるだけで、同じposts[]に入ってます。
以下のような感じです。
posts = [
id: 1,
name: "sample",
colorcode: "#ffffff"
],
[
id: 2,
name: "sample",
colorcode: "#ffffff"
]

[ysdeko]

デザインの部分を修正したら、自分の理想とする形になりました。
otnさん回答していただきありがとうございました。