css - 有没有办法使用 CSS 或 Ruby 将每个 block 调用自动拆分为列？

Question

我正在尝试清除旧应用程序的 View ，该应用程序列出了使用过特定公交车的前客户的姓名。这是它的样子:

    <div id="foo_list" style="display: none;">
        <div id="page_title"><h2>FOO</h2></div>
              <p class="ps20">Happy Foos who used our buses:</p>
                <div class="ps20">
                  <div class="grid_3 ps20">
                        <ul class="square_list">
                          <li>FOO1</li>
                          <li>FOO2 ETC... up to 10</li>
                        </ul>
                    </div>
                    <div class="grid_3">
                        <ul class="square_list">
                          <li>FOO1</li>
                          <li>FOO2 ETC... up to 10</li>
                        </ul>
                    </div>
                    <div class="float_l">
                        <ul class="square_list">
                          <li>FOO1</li>
                          <li>FOO2 ETC... up to 10</li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>

我已经提取了所有 FOO 信息并将其放入我们的数据库中，我正在使用每个 block 来调用 FOO，但我不知道如何做到这一点并保持三列的相同格式。现在我只有一个长专栏。无论如何要写一些 CSS，如果 FOO 的数量超过 10，它将把每个 block 平均分成 2 列(例如:11 个 FOO 分成 2 列，每列 6 和 5)，如果超过 20，则分成 3 个相等的-尽可能列？或者这是一个 Ruby 解决方案？还是两者兼而有之？

这就是我将其简化为的，我目前正在使用的:

        <div id="foo_list" style="display: none;">
          <div id="page_title"><h2>FOO</h2></div>
            <p class="ps20">Happy Foos who used our buses:</p>
                <div class="ps20">
                   <ul class="square_list">
                        <% @bus.foos.each do | foo | %>  
                            <li><%= foo.name %></li>
                        <% end %>
                    </ul>
                </div>
             </div>

Answer 1

Rails 的 in_groups 将在 ruby​​ 端完成。

http://apidock.com/rails/Array/in_groups

%w(1 2 3 4 5 6 7 8 9 10).in_groups(3) {|group| p group}
["1", "2", "3", "4"]
["5", "6", "7", nil]
["8", "9", "10", nil]