New row every 3 items [closed]

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.