css - 私のブループリント CSS は列の数が奇数で動作しません

Question

Rails アプリで Blueprint CSS を使用しています。これを、各アイテムの周りにボックスを配置した 4 列のレイアウトにしています。4 個のアイテムまたは 8 個のアイテムがある場合、すべて問題なく、2 行の製品があります。9 番目の製品または 4 で割り切れないものがある場合、行と項目がバラバラになり、次の列に飛び出します。誰が問題が何であるか知っていますか？

div.four-column {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-width: 10em;
    -webkit-column-width: 10em;
    column-width: 10em;
    width: 910px;
}

<ul>
  <% @products.each do |product| %>
    <li class="box">
      <%= link_to product.name, product_path(:id) %></br>
      <%= product.price %>
    </li>
  <% end %>
</ul>