Reorder array for a css multi-column layout

Question

how can I reorder an array

[1, 2, 3, 4, 5, 6, 7, 8, 9]

into..

[1, 4, 7, 2, 5, 8, 3, 6, 9]

I need it for a 3-column css layout:

<ul>
  <li>1</li>
  <li>4</li>
  <li>7</li>
  <li>2</li>
  <li>5</li>
  <li>8</li>
  <li>3</li>
  <li>6</li>
  <li>9</li>
</ul>


ul { -webkit-column-count: 3 }

This should produce:

| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |

Answer 1

ary = (1..9).to_a
ary.each_slice(3).to_a.transpose.flatten

Answer 2

slices = [1, 2, 3, 4, 5, 6, 7, 8, 9].each_slice(3).to_a
zip = slices[0].zip(*slices[1..-1]).flatten
#=> [1, 4, 7, 2, 5, 8, 3, 6, 9]