New row every 3 items [closed]

Question

I want to render my list of items 3 at a time so that they output in rows of three. I am current using

<div class="row">
  <div class="three columns">
 <% @items.each do |f|%>
   <div class="item">
     <%= f.content %>
       </div>
     <% end %>
  </div>
</div>

Which outputs all the rules in one 'row' -

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

what I want to be able to do is output a row for every three items returned, so -

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>
<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

Thanks

Answer 1

You can use each_slice method:

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

Additional note: What if you wanted 3 div for the last row, even if the last row contains only 2 items? (i.e. the @items is a list of 5 items, the last row should output only 2 div).

The solution:

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
      <% (3 - array_of_3_items.length).times.each do |fake_div| %>
        <div class="item empty">
        </div>
      <% end %>
    </div>
  </div>
<% end %>

Answer 2

Besides the aforementioned each_slice, Rails also has an in_groups_of method that you can use like so:

<% @items.in_groups_of(3, false).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

Pretty much the same as each_slice, except the scenario of needing to output blank divs becomes much cleaner like so:

<% @items.in_groups_of(3).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content if item %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

in_groups_of pads missing items in the last group with nil by default, so it will make the last few iterations and the if item check will make sure it doesn't blow up by calling content on nil.

in_groups is another fun one to use for view formatting.